forked from 77media/video-flow
42 lines
1.7 KiB
TypeScript
42 lines
1.7 KiB
TypeScript
"use client";
|
|
|
|
import { useState, useRef } from "react";
|
|
import { ArrowRight, Plus, StretchHorizontal, Table } from "lucide-react";
|
|
import "./style/home-page2.css";
|
|
import { useRouter } from "next/navigation";
|
|
|
|
export function HomePage2() {
|
|
const router = useRouter();
|
|
const [activeTool, setActiveTool] = useState("stretch");
|
|
return (
|
|
<div className="min-h-[100%] flex relative">
|
|
{/* 工具栏-列表形式切换 */}
|
|
<div className="absolute top-0 right-6 w-[8rem] flex z-index-2 justify-end">
|
|
<div role="group" className="flex p-1 bg-white/20 backdrop-blur-[15px] w-full rounded-[3rem]">
|
|
<button
|
|
className={`flex items-center justify-center h-10 transition-all duration-300 w-1/2 rounded-[3rem]
|
|
${activeTool === "stretch" ? "bg-white/20 text-white" : "hover:bg-white/10 text-white/30"}`}
|
|
onClick={() => setActiveTool("stretch")}
|
|
>
|
|
<StretchHorizontal className="w-5 h-5" />
|
|
</button>
|
|
<button
|
|
className={`flex items-center justify-center h-10 transition-all duration-300 w-1/2 rounded-[3rem]
|
|
${activeTool === "table" ? "bg-white/20 text-white" : "hover:bg-white/10 text-white/30"}`}
|
|
onClick={() => setActiveTool("table")}
|
|
>
|
|
<Table className="w-5 h-5" />
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="fixed bottom-[3.5rem] left-[50%] translate-x-[-50%] bg-white/10 backdrop-blur-lg rounded-[32px]">
|
|
<button className="add-project-btn" onClick={() => router.push("/create")}>
|
|
{/* 添加图标 */}
|
|
<Plus className="w-6 h-6 icon" />
|
|
<div className="btn-text">Create Project</div>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
);
|
|
} |