Copy Button

1'use client';
2 
3import * as React from 'react';
4import { cva, type VariantProps } from 'class-variance-authority';
5import { AnimatePresence, motion } from 'motion/react';
6import { CheckIcon, CopyIcon } from 'lucide-react';
7 
8import {
9  Button as ButtonPrimitive,
10  type ButtonProps as ButtonPrimitiveProps,
11} from '@/components/animate-ui/primitives/buttons/button';
12import { cn } from '@/lib/utils';
13import { useControlledState } from '@/hooks/use-controlled-state';
14 
15const buttonVariants = cva(
16  "flex items-center justify-center rounded-md transition-[box-shadow,_color,_background-color,_border-color,_outline-color,_text-decoration-color,_fill,_stroke] disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
17  {
18    variants: {
19      variant: {
20        default:
21          'bg-primary text-primary-foreground shadow-xs hover:bg-primary/90',
22        accent: 'bg-accent text-accent-foreground shadow-xs hover:bg-accent/90',
23        destructive:
24          'bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60',
25        outline:
26          'border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50',
27        secondary:
28          'bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80',
29        ghost:
30          'hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50',
31        link: 'text-primary underline-offset-4 hover:underline',
32      },
33      size: {
34        default: 'size-9',
35        xs: "size-7 [&_svg:not([class*='size-'])]:size-3.5 rounded-md",
36        sm: 'size-8 rounded-md',
37        lg: 'size-10 rounded-md',
38      },
39    },
40    defaultVariants: {
41      variant: 'default',
42      size: 'default',
43    },
44  },
45);
46 
47type CopyButtonProps = Omit<ButtonPrimitiveProps, 'children'> &
48  VariantProps<typeof buttonVariants> & {
49    content: string;
50    copied?: boolean;
51    onCopiedChange?: (copied: boolean, content?: string) => void;
52    delay?: number;
53  };
54 
55function CopyButton({
56  className,
57  content,
58  copied,
59  onCopiedChange,
60  onClick,
61  variant,
62  size,
63  delay = 3000,
64  ...props
65// … truncated