91 lines
2.1 KiB
TypeScript
91 lines
2.1 KiB
TypeScript
|
"use client"
|
||
|
|
import { ReactNode } from "react";
|
||
|
|
import clsx from "clsx";
|
||
|
|
import {
|
||
|
|
Home,
|
||
|
|
MonitorOne,
|
||
|
|
Movie,
|
||
|
|
Setting,
|
||
|
|
Terminal,
|
||
|
|
Toolkit,
|
||
|
|
} from "@icon-park/react";
|
||
|
|
import { useRouter } from "next/navigation";
|
||
|
|
|
||
|
|
interface SideButtonProps {
|
||
|
|
className?: string;
|
||
|
|
children?: ReactNode;
|
||
|
|
}
|
||
|
|
|
||
|
|
const SideButton = ({ className, children, ...rest }: SideButtonProps & React.ButtonHTMLAttributes<HTMLButtonElement>) => {
|
||
|
|
return (
|
||
|
|
<button
|
||
|
|
className={clsx(
|
||
|
|
className,
|
||
|
|
"p-2.5 hover:bg-black/5 rounded-lg transition"
|
||
|
|
)}
|
||
|
|
{...rest}
|
||
|
|
>
|
||
|
|
{children}
|
||
|
|
</button>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
|
||
|
|
const Avatar = () => {
|
||
|
|
const router = useRouter();
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div onClick={() => router.push('/test')} className="w-12 h-12 bg-gray-700 rounded-full cursor-pointer">
|
||
|
|
<img src="favicon.ico" alt="avatar" draggable={false} />
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
|
||
|
|
const SideBar = () => {
|
||
|
|
const router = useRouter();
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div
|
||
|
|
className="absolute left-0 flex flex-col w-20 h-full select-none py-7"
|
||
|
|
data-tauri-drag-region
|
||
|
|
>
|
||
|
|
<section className="mx-auto">
|
||
|
|
<Avatar />
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<section
|
||
|
|
className="flex flex-col items-center justify-center h-full gap-5"
|
||
|
|
data-tauri-drag-region
|
||
|
|
>
|
||
|
|
<SideButton onClick={() => router.push("/home")}>
|
||
|
|
<Home size={24} />
|
||
|
|
</SideButton>
|
||
|
|
<SideButton onClick={() => router.push("/tool")}>
|
||
|
|
<Toolkit size={24} />
|
||
|
|
</SideButton>
|
||
|
|
<SideButton onClick={() => router.push("/console")}>
|
||
|
|
<Terminal size={24} />
|
||
|
|
</SideButton>
|
||
|
|
<SideButton onClick={() => router.push("/gear")}>
|
||
|
|
<MonitorOne size={24} />
|
||
|
|
</SideButton>
|
||
|
|
<SideButton onClick={() => router.push("/movie")}>
|
||
|
|
<Movie size={24} />
|
||
|
|
</SideButton>
|
||
|
|
<SideButton onClick={() => router.push("/preference")}>
|
||
|
|
<Setting size={24} />
|
||
|
|
</SideButton>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<div
|
||
|
|
className="mx-auto text-sm text-center text-zinc-500"
|
||
|
|
data-tauri-drag-region
|
||
|
|
>
|
||
|
|
<p>版本号</p>
|
||
|
|
<p>0.0.1</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
|
||
|
|
export default SideBar;
|