feat: update-layout & add uuid tool (#4)

Co-authored-by: typist <git@mail.typist.cc>
Reviewed-on: #4

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[] = [];
+import type { Tool } from "./type";
+import { UUID } from './uuid'
+
+export const tools: Tool[] = [
+  {
+    path: "uuid",
+    name: "UUID Generator",
+    description: "Generate a UUID",
+    icon: <Hash />,
+    component: <UUID />,
+  }
+];

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;
+}

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 (
+    <div className="flex flex-col gap-4">
+      <span className="text-sm text-muted-foreground">Refresh the page to generate new UUID</span>
+      <label>UUID Version 1</label>
+      <span>{uuid.v1()}</span>
+      <label>UUID Version 4</label>
+      <span>{uuid.v4()}</span>
+      <label>UUID Version 6</label>
+      <span>{uuid.v6()}</span>
+      <label>UUID Version 7</label>
+      <span>{uuid.v7()}</span>
+      <label>Nano ID</label>
+      <span>{nanoid()}</span>
+    </div>
+  );
+};