copy-button

1'use client';
2 
3import type { VariantProps } from 'class-variance-authority';
4import { CheckIcon, Copy } from 'lucide-react';
5import * as React from 'react';
6import { Button, type buttonVariants } from '@/components/ui/button';
7 
8const DEFAULT_TIMEOUT = 2000;
9 
10type ButtonProps = React.ComponentProps<'button'> &
11  VariantProps<typeof buttonVariants> & {
12    asChild?: boolean;
13  };
14 
15export interface CopyButtonProps extends ButtonProps {
16  value: string;
17  copiedIcon?: React.ReactNode;
18  notCopiedIcon?: React.ReactNode;
19}
20 
21export function CopyButton({ value, copiedIcon = <CheckIcon />, notCopiedIcon = <Copy />, ...props }: CopyButtonProps) {
22  const [hasCopied, setHasCopied] = React.useState(false);
23 
24  const handleCopy = () => {
25    navigator.clipboard.writeText(value);
26    setHasCopied(true);
27    setTimeout(() => {
28      setHasCopied(false);
29    }, DEFAULT_TIMEOUT);
30  };
31 
32  return (
33    <Button size='icon' variant={'ghost'} className={'z-10 size-4'} onClick={handleCopy} {...props}>
34      <span className='sr-only'>Copy</span>
35      {hasCopied ? copiedIcon : notCopiedIcon}
36    </Button>
37  );
38}