src/components/sidebar/index.tsx

@@ -0,0 +1,25 @@
+import { Sidebar, SidebarContent, SidebarFooter, SidebarHeader, SidebarMenuButton, SidebarMenuItem } from "@/components/ui/sidebar";
+import { tools } from "@/components/tool";
+
+export const AppSidebar = () => (
+  <Sidebar>
+    <SidebarHeader>
+      Lite Kit
+    </SidebarHeader>
+    <SidebarContent>
+      {
+        tools.map((tool) => (
+          <SidebarMenuItem key={tool.name}>
+            <SidebarMenuButton>
+              {tool.icon}
+              {tool.name}
+            </SidebarMenuButton>
+          </SidebarMenuItem>
+        ))
+      }
+    </SidebarContent>
+    <SidebarFooter>
+      <a href="mailto:litek@mail.typist.cc">contact us</a>
+    </SidebarFooter>
+  </Sidebar>
+)

src/components/tool/index.tsx

@@ -0,0 +1,8 @@
+interface Tool {
+  name: string;
+  description: string;
+  icon: React.ReactNode;
+  component: React.ReactNode;
+}
+
+export const tools: Tool[] = [];

src/router.tsx

@@ -5,6 +5,7 @@ import {
 } from "react-router-dom";
 
 import { Layout } from "./layout";
+import { tools } from "@/components/tool";
 
 // 路由配置
 const router = createBrowserRouter([
@@ -15,18 +16,20 @@ const router = createBrowserRouter([
       {
         path: "tools",
         children: [
+          ...tools.map((tool) => (
+            {
+              path: tool.name,
+              element: tool.component,
+            }
+          )),
           {
             index: true,
-            loader: () => redirect(`/empty`),
+            element: null,
           },
         ]
       },
     ]
   },
-  {
-    path: "empty",
-    element: <div>Nohting</div>,
-  },
   {
     index: true,
     loader: () => {