Function CopyButton

components/shared/ui/copy-button.tsx:27–68

({
  value,
  copyText = 'Copy to clipboard',
  copiedText = 'Copied!',
  size = 'default',
  className,
  ...props
}: CopyButtonProps)

}

export function CopyButton({
  value,
  copyText = 'Copy to clipboard',
  copiedText = 'Copied!',
  size = 'default',
  className,
  ...props
}: CopyButtonProps) {
  const [hasCopied, setHasCopied] = React.useState(false);

  React.useEffect(() => {
    setTimeout(() => {
      setHasCopied(false);
    }, 2000);
  }, [hasCopied]);

  const copyToClipboard = React.useCallback((value: string) => {
    copyToClipboardWithMeta(value);
    setHasCopied(true);
  }, []);

  return (
    <Button
      size={size}
      variant="default"
      className={cn('relative flex gap-1', className)}
      onClick={() => copyToClipboard(value)}
      {...props}
    >
      {hasCopied ? (
        <>
          {copiedText} <CheckIcon className="h-3 w-3" />
        </>
      ) : (
        <>
          {copyText} <CopyIcon className="h-3 w-3" />
        </>
      )}
      <span className="sr-only">Copy</span>
    </Button>
  );
}