copy-button

1"use client"
2 
3import * as React from "react"
4import { CheckIcon, CopyIcon } from "lucide-react"
5 
6import { cn } from "@/lib/utils"
7import { Button } from "@/components/ui/button"
8 
9export function copyToClipboard(value: string) {
10  navigator.clipboard.writeText(value)
11}
12 
13interface CopyButtonProps extends React.ComponentProps<typeof Button> {
14  value: string
15  variant?:
16    | "ghost"
17    | "outline"
18    | "secondary"
19    | "default"
20    | "destructive"
21    | "link"
22  iconColor?: string
23}
24 
25export function CopyButton({
26  value,
27  className,
28  variant = "secondary",
29  iconColor,
30  ...props
31}: CopyButtonProps) {
32  const [hasCopied, setHasCopied] = React.useState(false)
33 
34  React.useEffect(() => {
35    if (hasCopied) {
36      const timer = setTimeout(() => {
37        setHasCopied(false)
38      }, 2000)
39      return () => clearTimeout(timer)
40    }
41  }, [hasCopied])
42 
43  return (
44    <Button
45      data-slot="copy-button"
46      size="icon"
47      variant={variant}
48      className={cn(
49        "hover:bg-muted active:bg-muted size-7 border-none bg-transparent shadow-none",
50        className
51      )}
52      onClick={() => {
53        copyToClipboard(value)
54        setHasCopied(true)
55      }}
56      {...props}
57    >
58      <span className="sr-only">Copy</span>
59      <div className="relative">
60        <div
61          className={cn(
62            "absolute inset-0 flex items-center justify-center transition-all duration-300 ease-in-out will-change-[transform,opacity,filter]",
63            hasCopied
64              ? "blur-0 scale-100 opacity-100"
65              : "scale-[0.25] opacity-0 blur-xs"
66          )}
67        >
68          <CheckIcon
69            className="h-3.5 w-3.5"
70            style={iconColor ? { color: iconColor } : {}}
71          />
72        </div>
73        <div
74          className={cn(
75            "transition-[transform,opacity,filter] duration-300 ease-in-out will-change-[transform,opacity,filter]",
76            hasCopied
77              ? "scale-[0.25] opacity-0 blur-xs"
78              : "blur-0 scale-100 opacity-100"
79          )}
80        >
81          <CopyIcon
82            className="h-3.5 w-3.5"
83            style={iconColor ? { color: iconColor } : {}}
84          />
85        </div>
86      </div>
87    </Button>
88  )
89}