From eda249ca67a0ccd32f9e2fe6580bb8a4c07b69bb Mon Sep 17 00:00:00 2001
From: DIYgod <i@diygod.me>
Date: Sun, 19 May 2024 10:44:38 +0800
Subject: [PATCH] feat: setting tabs

---
 src/renderer/src/main.tsx                   | 12 ++++-
 src/renderer/src/pages/settings.tsx         | 10 -----
 src/renderer/src/pages/settings/index.tsx   |  3 ++
 src/renderer/src/pages/settings/layout.tsx  | 50 +++++++++++++++++++++
 src/renderer/src/pages/settings/profile.tsx |  3 ++
 5 files changed, 67 insertions(+), 11 deletions(-)
 delete mode 100644 src/renderer/src/pages/settings.tsx
 create mode 100644 src/renderer/src/pages/settings/index.tsx
 create mode 100644 src/renderer/src/pages/settings/layout.tsx
 create mode 100644 src/renderer/src/pages/settings/profile.tsx

diff --git a/src/renderer/src/main.tsx b/src/renderer/src/main.tsx
index 292b82f613..d92bd7a646 100644
--- a/src/renderer/src/main.tsx
+++ b/src/renderer/src/main.tsx
@@ -55,7 +55,17 @@ const router = createBrowserRouter([
       },
       {
         path: "settings",
-        lazy: () => import("./pages/settings"),
+        lazy: () => import("./pages/settings/layout"),
+        children: [
+          {
+            path: "",
+            lazy: () => import("./pages/settings/index"),
+          },
+          {
+            path: "profile",
+            lazy: () => import("./pages/settings/profile"),
+          },
+        ],
       },
       {
         path: "debug",
diff --git a/src/renderer/src/pages/settings.tsx b/src/renderer/src/pages/settings.tsx
deleted file mode 100644
index 6288980bee..0000000000
--- a/src/renderer/src/pages/settings.tsx
+++ /dev/null
@@ -1,10 +0,0 @@
-export function Component() {
-  return (
-    <div
-      className="h-10 absolute top-0 inset-x-0 border-b flex items-center pl-20 text-sm font-medium"
-      aria-hidden
-    >
-      Follow Settings
-    </div>
-  )
-}
diff --git a/src/renderer/src/pages/settings/index.tsx b/src/renderer/src/pages/settings/index.tsx
new file mode 100644
index 0000000000..7f3fa3cfdd
--- /dev/null
+++ b/src/renderer/src/pages/settings/index.tsx
@@ -0,0 +1,3 @@
+export function Component() {
+  return <>general</>
+}
diff --git a/src/renderer/src/pages/settings/layout.tsx b/src/renderer/src/pages/settings/layout.tsx
new file mode 100644
index 0000000000..8121d8481f
--- /dev/null
+++ b/src/renderer/src/pages/settings/layout.tsx
@@ -0,0 +1,50 @@
+import { cn } from "@renderer/lib/utils"
+import { Link, Outlet, useLocation } from "react-router-dom"
+
+const tabs = [
+  {
+    name: "General",
+    path: "",
+    className: "i-mingcute-settings-7-line",
+  },
+  {
+    name: "Profile",
+    path: "profile",
+    className: "i-mingcute-user-setting-line",
+  },
+]
+
+export function Component() {
+  const location = useLocation()
+  const tab = location.pathname.replace(/^\/settings\/?/, "")
+
+  return (
+    <div className="flex flex-col h-screen">
+      <div
+        className="h-10 border-b flex items-center pl-20 text-sm font-medium"
+        aria-hidden
+      >
+        Follow Settings
+      </div>
+      <div className="flex flex-1">
+        <div className="border-r w-44 p-2">
+          {tabs.map((t) => (
+            <Link
+              key={t.path}
+              className={`flex items-center h-9 text-[15px] rounded transition-colors p-2 text-zinc-600 ${
+                tab === t.path ? "bg-zinc-200 text-zinc-900" : ""
+              }`}
+              to={`/settings/${t.path}`}
+            >
+              <i className={cn("m-2", t.className)}></i>
+              {t.name}
+            </Link>
+          ))}
+        </div>
+        <div className="p-2">
+          <Outlet />
+        </div>
+      </div>
+    </div>
+  )
+}
diff --git a/src/renderer/src/pages/settings/profile.tsx b/src/renderer/src/pages/settings/profile.tsx
new file mode 100644
index 0000000000..4f867187bc
--- /dev/null
+++ b/src/renderer/src/pages/settings/profile.tsx
@@ -0,0 +1,3 @@
+export function Component() {
+  return <>profile</>
+}