Skip to content

Commit 6f13d10

Browse files
abusufyan-netizenabusufyan-netizen
committed
Asset 1/15: Implement high-authority UUID v7 Generator tool
1 parent 24cf01b commit 6f13d10

2 files changed

Lines changed: 190 additions & 0 deletions

File tree

‎app/tools/page.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@ const tools = [
1515

1616
// Generators
1717
{ name: 'Secure Password Generator', description: 'US-standard cryptographically secure password generation tool', icon: Key, href: '/tools/password-generator', color: 'from-indigo-500 to-indigo-700', category: 'Generators' },
18+
{ name: 'UUID v7 Generator', description: 'Next-gen time-ordered unique identifiers (RFC 9562)', icon: Zap, href: '/tools/uuid-v7-generator', color: 'from-lime-500 to-lime-700', category: 'Generators' },
1819
{ name: 'UUID/GUID Generator', description: 'Instant RFC-compliant unique identifier generation', icon: Shuffle, href: '/tools/uuid-generator', color: 'from-lime-600 to-lime-800', category: 'Generators' },
1920
{ name: 'Lorem Ipsum Generator', description: 'Professional placeholder text for designers and developers', icon: AlignLeft, href: '/tools/lorem-ipsum', color: 'from-orange-500 to-orange-700', category: 'Generators' },
2021
{ name: 'SEO Meta Tag Generator', description: 'Create Google-ready meta tags for high search visibility', icon: Globe, href: '/tools/meta-tag-generator', color: 'from-rose-500 to-rose-700', category: 'Generators' },

‎app/tools/uuid-v7-generator/page.tsx‎

Lines changed: 189 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,189 @@
1+
'use client'
2+
3+
import React, { useState, useEffect } from 'react'
4+
import { Zap, Copy, Check, RefreshCw, Info } from 'lucide-react'
5+
import BreadcrumbSchema from '@/components/seo/BreadcrumbSchema'
6+
7+
export default function UuidV7Generator() {
8+
const [uuids, setUuids] = useState<string[]>([])
9+
const [count, setCount] = useState(5)
10+
const [copied, setCopied] = useState<number | null>(null)
11+
12+
const generateV7 = () => {
13+
const newUuids = []
14+
for (let i = 0; i < count; i++) {
15+
const now = Date.now()
16+
const random = crypto.getRandomValues(new Uint8Array(10))
17+
18+
const uuid = new Uint8Array(16)
19+
20+
// Timestamp (48 bits)
21+
uuid[0] = (now / 0x10000000000) & 0xff
22+
uuid[1] = (now / 0x100000000) & 0xff
23+
uuid[2] = (now / 0x1000000) & 0xff
24+
uuid[3] = (now / 0x10000) & 0xff
25+
uuid[4] = (now / 0x100) & 0xff
26+
uuid[5] = now & 0xff
27+
28+
// Version 7
29+
uuid[6] = 0x70 | (random[0] & 0x0f)
30+
uuid[7] = random[1]
31+
32+
// Variant 2 (10xx)
33+
uuid[8] = 0x80 | (random[2] & 0x3f)
34+
uuid[9] = random[3]
35+
uuid[10] = random[4]
36+
uuid[11] = random[5]
37+
uuid[12] = random[6]
38+
uuid[13] = random[7]
39+
uuid[14] = random[8]
40+
uuid[15] = random[9]
41+
42+
const hex = Array.from(uuid).map(b => b.toString(16).padStart(2, '0')).join('')
43+
const formatted = `${hex.slice(0, 8)}-${hex.slice(8, 12)}-${hex.slice(12, 16)}-${hex.slice(16, 20)}-${hex.slice(20)}`
44+
newUuids.push(formatted)
45+
}
46+
setUuids(newUuids)
47+
}
48+
49+
useEffect(() => {
50+
generateV7()
51+
}, [])
52+
53+
const handleCopy = (text: string, index: number) => {
54+
navigator.clipboard.writeText(text)
55+
setCopied(index)
56+
setTimeout(() => setCopied(null), 2000)
57+
}
58+
59+
const handleCopyAll = () => {
60+
navigator.clipboard.writeText(uuids.join('\n'))
61+
setCopied(-1)
62+
setTimeout(() => setCopied(null), 2000)
63+
}
64+
65+
return (
66+
<div className="min-h-screen bg-white dark:bg-slate-950 py-12 px-4 sm:px-6 lg:px-8 transition-colors duration-300">
67+
<BreadcrumbSchema name="UUID v7 Generator" slug="uuid-v7-generator" />
68+
69+
<div className="max-w-4xl mx-auto">
70+
<div className="flex flex-col md:flex-row md:items-center justify-between gap-6 mb-12">
71+
<div className="flex items-center gap-4">
72+
<div className="p-4 bg-lime-500 rounded-2xl shadow-lg shadow-lime-500/20">
73+
<Zap className="w-8 h-8 text-white" />
74+
</div>
75+
<div>
76+
<h1 className="text-3xl font-extrabold text-gray-900 dark:text-white tracking-tight">UUID v7 Generator</h1>
77+
<p className="text-gray-500 dark:text-slate-400">Generate time-ordered, database-friendly unique identifiers (RFC 9562)</p>
78+
</div>
79+
</div>
80+
81+
<div className="flex items-center gap-2">
82+
<span className="inline-flex items-center px-3 py-1 rounded-full text-xs font-bold bg-blue-100 dark:bg-blue-900/30 text-blue-600 dark:text-blue-400 border border-blue-200 dark:border-blue-800 uppercase tracking-wider">
83+
New Standard
84+
</span>
85+
</div>
86+
</div>
87+
88+
<div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
89+
<div className="lg:col-span-2 space-y-6">
90+
<div className="bg-gray-50 dark:bg-slate-900 rounded-3xl border border-gray-100 dark:border-slate-800 p-8 shadow-sm">
91+
<div className="flex items-center justify-between mb-6">
92+
<div className="flex items-center gap-4">
93+
<label className="text-sm font-bold text-gray-400 dark:text-slate-500 uppercase tracking-widest">Quantity</label>
94+
<input
95+
type="number"
96+
min="1"
97+
max="50"
98+
value={count}
99+
onChange={(e) => setCount(Math.max(1, Math.min(50, parseInt(e.target.value) || 1)))}
100+
className="w-20 px-3 py-2 bg-white dark:bg-slate-800 border border-gray-200 dark:border-slate-700 rounded-xl text-center font-bold text-gray-900 dark:text-white focus:ring-2 focus:ring-lime-500 outline-none"
101+
/>
102+
</div>
103+
<div className="flex gap-2">
104+
<button
105+
onClick={generateV7}
106+
className="p-3 bg-white dark:bg-slate-800 text-gray-600 dark:text-slate-300 hover:text-lime-500 border border-gray-200 dark:border-slate-700 rounded-xl transition-all hover:shadow-md"
107+
title="Refresh"
108+
>
109+
<RefreshCw className="w-5 h-5" />
110+
</button>
111+
<button
112+
onClick={handleCopyAll}
113+
className="flex items-center gap-2 px-6 py-3 bg-lime-500 text-white font-bold rounded-xl hover:bg-lime-600 transition-all shadow-lg shadow-lime-500/20"
114+
>
115+
{copied === -1 ? <Check className="w-5 h-5" /> : <Copy className="w-5 h-5" />}
116+
<span>{copied === -1 ? 'All Copied' : 'Copy All'}</span>
117+
</button>
118+
</div>
119+
</div>
120+
121+
<div className="space-y-3">
122+
{uuids.map((uuid, index) => (
123+
<div
124+
key={index}
125+
className="group flex items-center justify-between p-4 bg-white dark:bg-slate-800 border border-gray-100 dark:border-slate-700 rounded-2xl hover:border-lime-500 dark:hover:border-lime-500/50 transition-all"
126+
>
127+
<code className="text-sm md:text-base font-mono text-gray-600 dark:text-slate-300 break-all">
128+
{uuid}
129+
</code>
130+
<button
131+
onClick={() => handleCopy(uuid, index)}
132+
className={`ml-4 p-2 rounded-lg transition-all ${copied === index ? 'bg-green-50 dark:bg-green-900/20 text-green-600 dark:text-green-400' : 'text-gray-300 dark:text-slate-600 group-hover:text-lime-500'}`}
133+
>
134+
{copied === index ? <Check className="w-5 h-5" /> : <Copy className="w-5 h-5" />}
135+
</button>
136+
</div>
137+
))}
138+
</div>
139+
</div>
140+
141+
{/* Information Section for Linkability */}
142+
<div className="bg-blue-50 dark:bg-blue-900/10 rounded-3xl p-8 border border-blue-100 dark:border-blue-900/30">
143+
<div className="flex items-start gap-4">
144+
<div className="mt-1 text-blue-600 dark:text-blue-400">
145+
<Info className="w-6 h-6" />
146+
</div>
147+
<div>
148+
<h2 className="text-lg font-bold text-gray-900 dark:text-white mb-2">Why use UUID v7?</h2>
149+
<p className="text-gray-600 dark:text-slate-400 leading-relaxed text-sm">
150+
Unlike UUID v4 which is completely random, UUID v7 is **time-ordered**. This makes it much more efficient for database indexing (B-Trees), improving insert performance while remaining globally unique. It is the new recommended standard for modern distributed systems.
151+
</p>
152+
</div>
153+
</div>
154+
</div>
155+
</div>
156+
157+
{/* Sidebar / Sidebar Ad slot */}
158+
<div className="space-y-8">
159+
<div className="bg-white dark:bg-slate-900 rounded-3xl border border-gray-100 dark:border-slate-800 p-8">
160+
<h3 className="text-sm font-bold text-gray-400 dark:text-slate-500 uppercase tracking-widest mb-6">Technical Specs</h3>
161+
<ul className="space-y-4">
162+
<li className="flex justify-between text-sm">
163+
<span className="text-gray-500">Version</span>
164+
<span className="font-mono font-bold text-gray-900 dark:text-white">v7 (Unix Epoch)</span>
165+
</li>
166+
<li className="flex justify-between text-sm">
167+
<span className="text-gray-500">Timestamp</span>
168+
<span className="font-mono font-bold text-gray-900 dark:text-white">48-bit ms</span>
169+
</li>
170+
<li className="flex justify-between text-sm">
171+
<span className="text-gray-500">Entropy</span>
172+
<span className="font-mono font-bold text-gray-900 dark:text-white">74-bit random</span>
173+
</li>
174+
<li className="flex justify-between text-sm">
175+
<span className="text-gray-500">Format</span>
176+
<span className="font-mono font-bold text-gray-900 dark:text-white">RFC 9562</span>
177+
</li>
178+
</ul>
179+
</div>
180+
181+
<div className="min-h-[250px] bg-gray-50 dark:bg-slate-900/50 rounded-3xl flex items-center justify-center border border-dashed border-gray-200 dark:border-slate-800">
182+
<span className="text-xs text-gray-400 uppercase tracking-widest font-bold">Ad Placement</span>
183+
</div>
184+
</div>
185+
</div>
186+
</div>
187+
</div>
188+
)
189+
}

0 commit comments

Comments
 (0)