Copy Button

1"use client";
2 
3import React, { useState } from "react";
4 
5import { Check, Copy } from "lucide-react";
6import { Button } from "@/registry/ui/button";
7import { cn } from "@/lib/utils";
8 
9export const CopyButton = ({
10  value,
11  className,
12  ...props
13}: {
14  value: string;
15  className?: string;
16} & React.ComponentProps<"button">) => {
17  const [copied, setCopied] = useState(false);
18 
19  const handleCopy = (e: React.MouseEvent<HTMLButtonElement>) => {
20    if (!value) return;
21    e.stopPropagation();
22    navigator.clipboard.writeText(value);
23    setCopied(true);
24    setTimeout(() => {
25      setCopied(false);
26    }, 2000);
27  };
28 
29  return (
30    <Button
31      variant="ghost"
32      size="icon"
33      data-state={copied ? "copied" : "not-copied"}
34      {...props}
35      className={cn("transition-opacity relative flex-shrink-0", className)}
36      onClick={handleCopy}
37    >
38      <span className="sr-only">Copy</span>
39      <Check
40        className={cn(
41          "w-4 h-4 absolute inset-0 m-auto transition-all duration-200",
42          copied ? "opacity-100 blur-0 scale-100" : "opacity-0 blur-sm scale-75"
43        )}
44        aria-label="Copied"
45      />
46      <Copy
47        className={cn(
48          "w-4 h-4 absolute inset-0 m-auto transition-all duration-200",
49          !copied
50            ? "opacity-100 blur-0 scale-100"
51            : "opacity-0 blur-sm scale-75"
52        )}
53        aria-label="Copy"
54      />
55    </Button>
56  );
57};