From f7f34e2797e79ffedde6c41f946c43dddfec0a48 Mon Sep 17 00:00:00 2001
From: typist <git@mail.typist.cc>
Date: Tue, 28 Oct 2025 00:54:38 +0800
Subject: [PATCH] feat: enhance UUID component to display multiple UUID
 versions and Nano ID

- Updated the UUID component to generate and display UUIDs of versions 1, 4, 6, and 7, along with a Nano ID.
- Improved user instructions for generating new UUIDs upon page refresh.
---
 src/components/tool/uuid.tsx | 23 +++++++++++++++++++++--
 1 file changed, 21 insertions(+), 2 deletions(-)

diff --git a/src/components/tool/uuid.tsx b/src/components/tool/uuid.tsx
index a9e5003..3d8464b 100644
--- a/src/components/tool/uuid.tsx
+++ b/src/components/tool/uuid.tsx
@@ -1,3 +1,22 @@
-import type { FC } from "react";
+import { type FC } from "react";
 
-export const UUID: FC = () => <div>UUID</div>
\ No newline at end of file
+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>
+  );
+};
\ No newline at end of file