Copy Button

1"use client";
2 
3import { CheckIcon, ClipboardIcon } from "blode-icons-react";
4import { AnimatePresence, motion } from "motion/react";
5import type * as React from "react";
6 
7import { cn } from "@/lib/utils";
8import { useCopyToClipboard } from "@/hooks/use-copy-to-clipboard";
9import { Button } from "@/components/ui/button";
10 
11export interface CopyButtonProps extends Omit<
12  React.ComponentProps<typeof Button>,
13  "onClick" | "children"
14> {
15  /** Accessible label (default: "Copy") */
16  label?: string;
17  /** Callback when text is copied */
18  onCopy?: () => void;
19  /** Timeout in ms before resetting (default: 2000) */
20  timeout?: number;
21  /** The text to copy to clipboard */
22  value: string;
23}
24 
25const CopyButton = ({
26  value,
27  className,
28  variant = "ghost",
29  size = "icon",
30  onCopy,
31  timeout = 2000,
32  label = "Copy",
33  ...props
34}: CopyButtonProps) => {
35  const { isCopied, copyToClipboard } = useCopyToClipboard({
36    onCopy,
37    timeout,
38  });
39 
40  return (
41    <Button
42      aria-label={label}
43      className={cn("shrink-0", className)}
44      data-copied={isCopied}
45      data-slot="copy-button"
46      onClick={() => copyToClipboard(value)}
47      size={size}
48      variant={variant}
49      {...props}
50    >
51      <AnimatePresence initial={false} mode="wait">
52        <motion.span
53          animate={{ opacity: 1, scale: 1 }}
54          className="flex items-center justify-center"
55          exit={{ opacity: 0, scale: 0.8 }}
56          initial={{ opacity: 0, scale: 0.8 }}
57          key={isCopied ? "check" : "copy"}
58          transition={{ duration: 0.15 }}
59        >
60          {isCopied ? <CheckIcon /> : <ClipboardIcon />}
61        </motion.span>
62      </AnimatePresence>
63    </Button>
64  );
65};
66 
67export { CopyButton };