diff --git a/package.json b/package.json index 951a73f..188ff8d 100644 --- a/package.json +++ b/package.json @@ -18,11 +18,13 @@ "class-variance-authority": "^0.7.1", "clsx": "^2.1.1", "lucide-react": "^0.548.0", + "nanoid": "^5.1.6", "react": "^19.1.1", "react-dom": "^19.1.1", "react-router-dom": "^7.9.4", "tailwind-merge": "^3.3.1", - "tailwindcss": "^4.1.16" + "tailwindcss": "^4.1.16", + "uuid": "^13.0.0" }, "devDependencies": { "@eslint/js": "^9.36.0", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index a0925a3..bca26d2 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -35,6 +35,9 @@ importers: lucide-react: specifier: ^0.548.0 version: 0.548.0(react@19.2.0) + nanoid: + specifier: ^5.1.6 + version: 5.1.6 react: specifier: ^19.1.1 version: 19.2.0 @@ -50,6 +53,9 @@ importers: tailwindcss: specifier: ^4.1.16 version: 4.1.16 + uuid: + specifier: ^13.0.0 + version: 13.0.0 devDependencies: '@eslint/js': specifier: ^9.36.0 @@ -1266,6 +1272,11 @@ packages: engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1} hasBin: true + nanoid@5.1.6: + resolution: {integrity: sha512-c7+7RQ+dMB5dPwwCp4ee1/iV/q2P6aK1mTZcfr1BTuVlyW9hJYiMPybJCcnBlQtuSmTIWNeazm/zqNoZSSElBg==} + engines: {node: ^18 || >=20} + hasBin: true + natural-compare@1.4.0: resolution: {integrity: sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==} @@ -1551,6 +1562,10 @@ packages: '@types/react': optional: true + uuid@13.0.0: + resolution: {integrity: sha512-XQegIaBTVUjSHliKqcnFqYypAd4S+WCYt5NIeRs6w/UAry7z8Y9j5ZwRRL4kzq9U3sD6v+85er9FvkEaBpji2w==} + hasBin: true + which@2.0.2: resolution: {integrity: sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==} engines: {node: '>= 8'} @@ -2683,6 +2698,8 @@ snapshots: nanoid@3.3.11: {} + nanoid@5.1.6: {} + natural-compare@1.4.0: {} node-releases@2.0.26: {} @@ -2912,6 +2929,8 @@ snapshots: optionalDependencies: '@types/react': 19.2.2 + uuid@13.0.0: {} + which@2.0.2: dependencies: isexe: 2.0.0 diff --git a/src/components/sidebar/index.tsx b/src/components/sidebar/index.tsx index a1c2680..85fbc54 100644 --- a/src/components/sidebar/index.tsx +++ b/src/components/sidebar/index.tsx @@ -1,22 +1,32 @@ -import { Sidebar, SidebarContent, SidebarFooter, SidebarHeader, SidebarMenuButton, SidebarMenuItem } from "@/components/ui/sidebar"; +import { Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarMenuButton, SidebarMenuItem } from "@/components/ui/sidebar"; import { tools } from "@/components/tool"; +import { Link } from "react-router-dom"; export const AppSidebar = () => ( - + Lite Kit - { - tools.map((tool) => ( - - - {tool.icon} - {tool.name} - - - )) - } + + + Tools + + + { + tools.map((tool) => ( + + + + {tool.icon} + {tool.name} + + + + )) + } + + contact us diff --git a/src/components/tool/index.tsx b/src/components/tool/index.tsx index 1ffec6c..ab2c2ef 100644 --- a/src/components/tool/index.tsx +++ b/src/components/tool/index.tsx @@ -1,8 +1,14 @@ -interface Tool { - name: string; - description: string; - icon: React.ReactNode; - component: React.ReactNode; -} +import { Hash } from 'lucide-react' -export const tools: Tool[] = []; \ No newline at end of file +import type { Tool } from "./type"; +import { UUID } from './uuid' + +export const tools: Tool[] = [ + { + path: "uuid", + name: "UUID Generator", + description: "Generate a UUID", + icon: , + component: , + } +]; \ No newline at end of file diff --git a/src/components/tool/type.ts b/src/components/tool/type.ts new file mode 100644 index 0000000..c12eed8 --- /dev/null +++ b/src/components/tool/type.ts @@ -0,0 +1,9 @@ +import type { ReactNode } from "react"; + +export interface Tool { + path: string; + name: string; + icon: ReactNode; + description: string; + component: ReactNode; +} \ No newline at end of file diff --git a/src/components/tool/uuid.tsx b/src/components/tool/uuid.tsx new file mode 100644 index 0000000..3d8464b --- /dev/null +++ b/src/components/tool/uuid.tsx @@ -0,0 +1,22 @@ +import { type FC } from "react"; + +import * as uuid from 'uuid' +import { nanoid } from 'nanoid' + +export const UUID: FC = () => { + return ( +
+ Refresh the page to generate new UUID + + {uuid.v1()} + + {uuid.v4()} + + {uuid.v6()} + + {uuid.v7()} + + {nanoid()} +
+ ); +}; \ No newline at end of file diff --git a/src/layout.tsx b/src/layout.tsx index 21994fa..b8755e5 100644 --- a/src/layout.tsx +++ b/src/layout.tsx @@ -1,14 +1,20 @@ -import { SidebarProvider, SidebarTrigger } from "@/components/ui/sidebar" -import { Sidebar } from "@/components/ui/sidebar" import type { FC } from "react" import { Outlet } from "react-router-dom"; +import { SidebarProvider, SidebarTrigger } from "@/components/ui/sidebar" +import { AppSidebar } from "@/components/sidebar"; + export const Layout: FC = () => ( - -
- - -
+ +
+ +
+ +
+
); \ No newline at end of file diff --git a/src/router.tsx b/src/router.tsx index 72d384c..c73043d 100644 --- a/src/router.tsx +++ b/src/router.tsx @@ -4,8 +4,8 @@ import { RouterProvider, } from "react-router-dom"; -import { Layout } from "./layout"; import { tools } from "@/components/tool"; +import { Layout } from "./layout"; // 路由配置 const router = createBrowserRouter([ @@ -14,17 +14,17 @@ const router = createBrowserRouter([ element: , children: [ { - path: "tools", + path: "tool", children: [ ...tools.map((tool) => ( { - path: tool.name, + path: tool.path, element: tool.component, } )), { index: true, - element: null, + loader: () => redirect("/tool/uuid"), }, ] }, @@ -32,15 +32,11 @@ const router = createBrowserRouter([ }, { index: true, - loader: () => { - return redirect("/tools"); - }, + loader: () => redirect("/tool"), }, { path: "*", - loader: () => { - return redirect("/tools"); - }, + loader: () => redirect("/tool"), }, ]);