update: setup layouts and basic ui

src/components/window/Card.tsx

@@ -0,0 +1,42 @@
+import { ReactNode } from "react";
+
+interface CardProps {
+  children: ReactNode;
+}
+
+const Card = ({ children }: CardProps) => {
+  return (
+    <div
+      className="dark:from-black/10 dark:to-black/5 dark:border-white/[6%] px-4 pt-3 pb-4 flex flex-col gap-2 border rounded-lg bg-gradient-to-br from-white/90 to-white/80 border-black/[6%]"
+      data-tauri-drag-region
+    >
+      {children}
+    </div>
+  );
+};
+
+const CardHeader = ({ children }: CardProps) => {
+  return (
+    <div className="flex items-center gap-2.5 tracking-wide">{children}</div>
+  );
+};
+
+const CardIcon = ({ children }: CardProps) => {
+  return (
+    <div className="flex gap-1.5 items-center font-semibold">{children}</div>
+  );
+};
+
+const CardTool = ({ children }: CardProps) => {
+  return (
+    <div className="flex items-center justify-end flex-grow gap-2">
+      {children}
+    </div>
+  );
+};
+
+const CardBody = ({ children }: CardProps) => {
+  return <div className="text-sm tracking-wide text-zinc-800">{children}</div>;
+};
+
+export { Card, CardHeader, CardIcon, CardTool, CardBody };

src/components/window/Header.tsx

@@ -0,0 +1,14 @@
+const Header = () => {
+  return (
+    <div className="pt-6 select-none pb-9" data-tauri-drag-region>
+      <h1 className="text-xl font-medium tracking-wide w-fit">
+        Faze.Rop紫本人
+      </h1>
+      <p className="text-sm font-light tracking-wide text-zinc-400 w-fit">
+        本周使用CSGO工具箱 62小时
+      </p>
+    </div>
+  );
+};
+
+export default Header;

src/components/window/Nav.tsx

@@ -0,0 +1,67 @@
+"use client"
+import { RocketOne, Minus, Close, Square } from "@icon-park/react";
+import { relaunch, exit } from "@tauri-apps/plugin-process";
+import { getCurrentWindow } from "@tauri-apps/api/window";
+// import { invoke } from "@tauri-apps/api/core";
+
+const Nav = () => {
+  const close = async () => {
+    // (await window.hideOnClose) ? getCurrent().hide() : exit();
+    await exit();
+  };
+
+  const minimize = () => {
+    getCurrentWindow()
+      .minimize()
+      .then(() => {
+        console.log("minimized");
+      })
+      .catch((err: unknown) => {
+        console.error(err);
+      });
+  };
+
+  const toggleMaximize = async () => {
+    const current = getCurrentWindow()
+    const maximized = await current.isMaximized()
+    maximized ? current.unmaximize() : current.maximize()
+  }
+
+  const reset = async () => {
+    await relaunch();
+  };
+
+  return (
+    <nav
+      className="absolute top-0 right-0 flex flex-row h-16 gap-0.5 p-4"
+      data-tauri-drag-region
+    >
+      <button
+        className="px-2 py-0 transition rounded hover:bg-zinc-200/80 active:scale-95"
+        onClick={reset}
+      >
+        <RocketOne size={16} />
+      </button>
+      <button
+        className="px-2 py-0 transition rounded hover:bg-zinc-200/80 active:scale-95"
+        onClick={minimize}
+      >
+        <Minus size={16} />
+      </button>
+      <button
+        className="px-2 py-0 transition rounded hover:bg-zinc-200/80 active:scale-95"
+        onClick={toggleMaximize}
+      >
+        <Square size={16} />
+      </button>
+      <button
+        className="px-2 py-0 transition rounded hover:bg-zinc-200/80 active:scale-95"
+        onClick={close}
+      >
+        <Close size={16} />
+      </button>
+    </nav>
+  );
+};
+
+export default Nav;

src/components/window/SideBar.tsx

@@ -0,0 +1,90 @@
+"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;