Copy Button

1// Thanks @ncdai
2
3"use client";
4
5import type { ComponentProps } from "react";
6import {
7  CancelCircleIcon,
8  Copy01Icon,
9  Tick02Icon,
10} from "@hugeicons/core-free-icons";
11import { HugeiconsIcon } from "@hugeicons/react";
12import { AnimatePresence, motion } from "motion/react";
13import type { HTMLMotionProps, Variants } from "motion/react";
14
15import { Button } from "@/components/ui/button";
16import type { CopyState } from "@/registry/hooks/use-copy-to-clipboard";
17import { useCopyToClipboard } from "@/registry/hooks/use-copy-to-clipboard";
18
19export const motionIconVariants: Variants = {
20  initial: (direction: number) => ({
21    opacity: 0,
22    scale: 0.8,
23    y: direction > 0 ? 10 : -10,
24    filter: "blur(2px)",
25  }),
26  animate: { opacity: 1, scale: 1, y: 0, filter: "blur(0px)" },
27  exit: (direction: number) => ({
28    opacity: 0,
29    scale: 0.8,
30    y: direction > 0 ? -10 : 10,
31    filter: "blur(2px)",
32  }),
33};
34
35export const motionIconProps: HTMLMotionProps<"span"> = {
36  variants: motionIconVariants,
37  initial: "initial",
38  animate: "animate",
39  exit: "exit",
40  transition: { duration: 0.15, ease: "easeOut" },
41};
42
43export type CopyStateIconProps = {
44  /** The current state of the copy operation. */
45  state: CopyState;
46  /** Custom icon for idle state. */
47  idleIcon?: React.ReactNode;
48  /** Custom icon for done state. */
49  doneIcon?: React.ReactNode;
50  /** Custom icon for error state. */
51  errorIcon?: React.ReactNode;
52};
53
54export function CopyStateIcon({
55  state,
56  idleIcon,
57  doneIcon,
58  errorIcon,
59}: CopyStateIconProps) {
60  const direction = state === "idle" ? -1 : 1;
61
62  return (
63    <span className="relative flex items-center justify-center">
64      <AnimatePresence mode="popLayout" initial={false} custom={direction}>
65        {state === "idle" ? (
66          <motion.span key="idle" {...motionIconProps} custom={direction}>
67            {idleIcon ?? <HugeiconsIcon icon={Copy01Icon} strokeWidth={2} />}
68          </motion.span>
69        ) : state === "done" ? (
70          <motion.span key="done" {...motionIconProps} custom={direction}>
71            {doneIcon ?? <HugeiconsIcon icon={Tick02Icon} strokeWidth={2} />}
72          </motion.span>
73        ) : state === "error" ? (
74          <motion.span key="error" {...motionIconProps} custom={direction}>
75            {errorIcon ?? (
76              <HugeiconsIcon icon={CancelCircleIcon} strokeWidth={2} />
77            )}
78          </motion.span>
79// … truncated