Copy Button

1"use client"
2 
3import type { ComponentProps } from "react"
4import { motion } from "motion/react"
5 
6import { cn } from "@/lib/utils"
7import type { CopyState } from "@/hooks/use-copy-to-clipboard"
8import { useCopyToClipboard } from "@/hooks/use-copy-to-clipboard"
9import { Button } from "@/components/ui/button"
10import { IconSwap, IconSwapItem } from "@/registry/components/icon-swap"
11import { IconPlaceholder } from "@/registry/icons/icon-placeholder"
12 
13export type CopyStateIconProps = {
14  state: CopyState
15  /** Custom icon for idle state. */
16  idleIcon?: React.ReactNode
17  /** Custom icon for done state. */
18  doneIcon?: React.ReactNode
19  /** Custom icon for error state. */
20  errorIcon?: React.ReactNode
21}
22 
23export function CopyStateIcon({
24  state,
25  idleIcon,
26  doneIcon,
27  errorIcon,
28}: CopyStateIconProps) {
29  return (
30    <IconSwap>
31      <IconSwapItem key={state} as={motion.span}>
32        {state === "idle" &&
33          (idleIcon ?? (
34            <IconPlaceholder
35              data-slot="idle-icon"
36              lucide="CopyIcon"
37              tabler="IconCopy"
38              hugeicons="Copy01Icon"
39              phosphor="CopyIcon"
40              remixicon="RiFileCopyLine"
41            />
42          ))}
43 
44        {state === "done" &&
45          (doneIcon ?? (
46            <IconPlaceholder
47              data-slot="done-icon"
48              lucide="CheckIcon"
49              tabler="IconCheck"
50              hugeicons="Tick02Icon"
51              phosphor="CheckIcon"
52              remixicon="RiCheckLine"
53            />
54          ))}
55 
56        {state === "error" &&
57          (errorIcon ?? (
58            <IconPlaceholder
59              data-slot="error-icon"
60              lucide="CircleXIcon"
61              tabler="IconX"
62              hugeicons="CancelCircleIcon"
63              phosphor="XCircleIcon"
64              remixicon="RiCloseCircleLine"
65            />
66          ))}
67      </IconSwapItem>
68    </IconSwap>
69  )
70}
71 
72export type CopyButtonProps = ComponentProps<typeof Button> & {
73  /** The text to copy, or a function that returns the text. */
74  text: string | (() => string)
75  /** Called with the copied text on successful copy. */
76  onCopySuccess?: (text: string) => void
77  /** Called with the error if the copy operation fails. */
78  onCopyError?: (error: Error) => void
79} & Omit<CopyStateIconProps, "state">
80 
81export function CopyButton({
82  className,
83  size = "icon",
84  children,
85  text,
86  idleIcon,
87  doneIcon,
88  errorIcon,
89  onClick,
90  onCopySuccess,
91  onCopyError,
92  ...props
93// … truncated