Copy Button

1"use client"
2 
3import { CheckIcon, CircleXIcon, CopyIcon } from "lucide-react"
4import type { HTMLMotionProps, Variants } from "motion/react"
5import { AnimatePresence, motion } from "motion/react"
6import type { ComponentProps } from "react"
7 
8import { Button } from "@/components/ui/button"
9import type { CopyState } from "@/hooks/use-copy-to-clipboard"
10import { useCopyToClipboard } from "@/hooks/use-copy-to-clipboard"
11 
12export const motionIconVariants: Variants = {
13  initial: { opacity: 0, scale: 0.8, filter: "blur(2px)" },
14  animate: { opacity: 1, scale: 1, filter: "blur(0px)" },
15  exit: { opacity: 0, scale: 0.8 },
16}
17 
18export const motionIconProps: HTMLMotionProps<"span"> = {
19  variants: motionIconVariants,
20  initial: "initial",
21  animate: "animate",
22  exit: "exit",
23  transition: { duration: 0.15, ease: "easeOut" },
24}
25 
26export type CopyStateIconProps = {
27  state: CopyState
28  /**
29   * Custom icon for idle state.
30   * @defaultValue CopyIcon
31   * */
32  idleIcon?: React.ReactNode
33  /**
34   * Custom icon for done state.
35   * @defaultValue CheckIcon
36   * */
37  doneIcon?: React.ReactNode
38  /**
39   * Custom icon for error state.
40   * @defaultValue CircleXIcon
41   * */
42  errorIcon?: React.ReactNode
43}
44 
45export function CopyStateIcon({
46  state,
47  idleIcon,
48  doneIcon,
49  errorIcon,
50}: CopyStateIconProps) {
51  return (
52    <AnimatePresence mode="popLayout" initial={false}>
53      {state === "idle" ? (
54        <motion.span key="idle" {...motionIconProps}>
55          {idleIcon ?? <CopyIcon />}
56        </motion.span>
57      ) : state === "done" ? (
58        <motion.span key="done" {...motionIconProps}>
59          {doneIcon ?? <CheckIcon strokeWidth={3} />}
60        </motion.span>
61      ) : state === "error" ? (
62        <motion.span key="error" {...motionIconProps}>
63          {errorIcon ?? <CircleXIcon />}
64        </motion.span>
65      ) : null}
66    </AnimatePresence>
67  )
68}
69 
70export type CopyButtonProps = ComponentProps<typeof Button> & {
71  /** The text to copy, or a function that returns the text. */
72  text: string | (() => string)
73  /** Called with the copied text on successful copy. */
74  onCopySuccess?: (text: string) => void
75  /** Called with the error if the copy operation fails. */
76  onCopyError?: (error: Error) => void
77} & Pick<CopyStateIconProps, "idleIcon" | "doneIcon" | "errorIcon">
78 
79export function CopyButton({
80  size = "icon",
81  children,
82  text,
83  idleIcon,
84  doneIcon,
85  errorIcon,
86  onClick,
87  onCopySuccess,
88  onCopyError,
89  ...props
90}: CopyButtonProps) {
91// … truncated