1"use client";
2
3import React, { useEffect, useState } from "react";
4
5export default function Page() {
6  const [uuid, setUuid] = useState("");
7  const [showToast, setShowToast] = useState(false);
8
9  useEffect(() => {
10    setUuid(crypto.randomUUID());
11  }, []);
12
13  const copyToClipboard = (id: string) => {
14    navigator.clipboard.writeText(id);
15    setShowToast(true);
16    setTimeout(() => setShowToast(false), 2000);
17  };
18
19  return (
20    <div className="flex justify-center items-center h-screen">
21      {showToast && (
22        <div className="absolute top-4 left-1/2 transform -translate-x-1/2 bg-gray-800 text-white px-4 py-2 rounded-md shadow-lg transition-opacity duration-500">
23          Copied to clipboard!
24        </div>
25      )}
26      <div className="flex flex-col items-center justify-center h-screen">
27        <span className="text-sm text-gray-500 inline-block mb-2"></span>
28        <div className="text-2xl font-bold">
29          Random UUID:{" "}
30          <span className="relative group">
31            <span
32              className="text-indigo-500 font-bold cursor-pointer hover:opacity-80"
33              onClick={() => copyToClipboard(uuid)}
34            >
35              {uuid}
36            </span>
37            <div className="absolute bottom-full left-1/2 transform -translate-x-1/2 mb-2 hidden group-hover:block">
38              <div className="bg-gray-800 text-white text-xs rounded py-1 px-2 whitespace-nowrap">
39                Click to copy
40              </div>
41              <div className="absolute top-full left-1/2 transform -translate-x-1/2 -mt-1">
42                <div className="border-4 border-transparent border-t-gray-800"></div>
43              </div>
44            </div>
45          </span>
46        </div>
47        <button
48          className="bg-indigo-500 font-bold text-white p-2 rounded-md mt-4"
49          onClick={() => setUuid(crypto.randomUUID())}
50        >
51          Generate new UUID
52        </button>
53      </div>
54    </div>
55  );
56}
57