Copy Button

1"use client";
2 
3import * as React from "react";
4import { CheckIcon, CopyIcon } from "lucide-react";
5import { cn } from "@/lib/utils";
6 
7type SizeVariant = "sm" | "default" | "lg";
8 
9interface CopyButtonProps
10  extends React.ButtonHTMLAttributes<HTMLButtonElement> {
11  value?: string;
12  size?: SizeVariant;
13}
14 
15const sizeMap: Record<SizeVariant, { button: string; icon: number }> = {
16  sm: { button: "h-8 w-8", icon: 14 },
17  default: { button: "h-9 w-9", icon: 16 },
18  lg: { button: "h-12 w-12", icon: 20 },
19};
20 
21const CopyButton = React.forwardRef<HTMLButtonElement, CopyButtonProps>(
22  (
23    {
24      value,
25      size = "default",
26      className,
27      onClick,
28      ...props
29    },
30    ref,
31  ) => {
32    const [copied, setCopied] = React.useState<boolean>(false);
33 
34    const handleCopy = (event: React.MouseEvent<HTMLButtonElement>) => {
35      if (value) {
36        navigator.clipboard.writeText(value).catch(() => {});
37      }
38      setCopied(true);
39      setTimeout(() => setCopied(false), 1500);
40      onClick?.(event);
41    };
42 
43    const { button: buttonSize, icon: iconSize } = sizeMap[size];
44 
45    return (
46      <button
47        ref={ref}
48        type="button"
49        onClick={handleCopy}
50        aria-label={copied ? "Copied" : "Copy to clipboard"}
51        disabled={copied}
52        className={cn(
53          "relative cursor-pointer active:scale-[0.97] transition-all ease-out duration-200 inline-flex items-center justify-center rounded-md text-neutral-900 disabled:pointer-events-none disabled:opacity-100 dark:text-neutral-50",
54          buttonSize,
55          className,
56        )}
57        {...props}
58      >
59        <div
60          className={cn(
61            "transition-all duration-200",
62            copied
63              ? "scale-100 opacity-100 blur-none"
64              : "scale-70 opacity-0 blur-[2px]",
65          )}
66        >
67          <CheckIcon
68            size={iconSize}
69            strokeWidth={2}
70            aria-hidden="true"
71          />
72        </div>
73        <div
74          className={cn(
75            "absolute transition-all duration-200",
76            copied
77              ? "scale-0 opacity-0 blur-[2px]"
78              : "scale-100 opacity-100 blur-none",
79          )}
80        >
81          <CopyIcon size={iconSize} strokeWidth={2} aria-hidden="true" />
82        </div>
83      </button>
84    );
85  },
86);
87 
88CopyButton.displayName = "CopyButton";
89 
90export { CopyButton };
91export type { CopyButtonProps };