feat: demo

demo/nextjs/components/ui/copy-button.tsx

@@ -0,0 +1,53 @@
+import { useState, useEffect } from 'react'
+import { Button } from "@/components/ui/button"
+import { Copy, Check } from "lucide-react"
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip"
+
+interface CopyButtonProps {
+    textToCopy: string
+}
+
+export default function CopyButton({ textToCopy }: CopyButtonProps) {
+    const [isCopied, setIsCopied] = useState(false)
+
+    useEffect(() => {
+        if (isCopied) {
+            const timer = setTimeout(() => setIsCopied(false), 2000)
+            return () => clearTimeout(timer)
+        }
+    }, [isCopied])
+
+    const handleCopy = async () => {
+        try {
+            await navigator.clipboard.writeText(textToCopy)
+            setIsCopied(true)
+        } catch (err) {
+            console.error('Failed to copy text: ', err)
+        }
+    }
+
+    return (
+        <TooltipProvider>
+            <Tooltip>
+                <TooltipTrigger asChild>
+                    <Button
+                        variant="link"
+                        size="icon"
+                        onClick={handleCopy}
+                        className="h-8 w-8"
+                    >
+                        {isCopied ? (
+                            <Check className="h-4 w-4 " />
+                        ) : (
+                            <Copy className="h-4 w-4" />
+                        )}
+                        <span className="sr-only">Copy to clipboard</span>
+                    </Button>
+                </TooltipTrigger>
+                <TooltipContent>
+                    <p>{isCopied ? 'Copied!' : 'Copy to clipboard'}</p>
+                </TooltipContent>
+            </Tooltip>
+        </TooltipProvider>
+    )
+}