Copy Button

1'use client';
2 
3import React, { useState } from 'react';
4import { Check, Copy } from 'lucide-react';
5import { copyToClipboard } from '@/lib/utils/deso';
6import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';
7import { cn } from '@/lib/utils/deso';
8 
9export interface CopyButtonProps {
10  textToCopy: string;
11  size?: 'sm' | 'md' | 'lg';
12  label?: string;
13  className?: string;
14  showTooltip?: boolean;
15  tooltipText?: string;
16  successTooltipText?: string;
17  successLabel?: string;
18}
19 
20export function CopyButton({ 
21  textToCopy, 
22  size = 'md', 
23  label, 
24  className,
25  showTooltip = true,
26  tooltipText = 'Copy to clipboard',
27  successTooltipText = 'Copied!',
28  successLabel,
29}: CopyButtonProps) {
30  const [copied, setCopied] = useState(false);
31  
32  const handleCopy = async () => {
33    const success = await copyToClipboard(textToCopy);
34    if (success) {
35      setCopied(true);
36      setTimeout(() => setCopied(false), 2000);
37    }
38  };
39  
40  const iconSizes = {
41    sm: 'h-3 w-3',
42    md: 'h-4 w-4',
43    lg: 'h-5 w-5',
44  };
45 
46  const buttonContent = (
47    <button
48      onClick={handleCopy}
49      className={cn(
50        'cursor-pointer flex items-center gap-1 p-1 text-muted-foreground hover:text-foreground focus:outline-none',
51        className
52      )}
53      aria-label={tooltipText}
54    >
55      {copied ? (
56        <Check className={cn('text-green-500', iconSizes[size])} />
57      ) : (
58        <Copy className={iconSizes[size]} />
59      )}
60      {copied && successLabel && <span className="text-sm">{successLabel}</span>}
61      {!copied && label && <span className="text-sm">{label}</span>}
62    </button>
63  );
64 
65  if (!showTooltip) {
66    return buttonContent;
67  }
68  
69  return (
70    <TooltipProvider>
71      <Tooltip>
72        <TooltipTrigger asChild>
73          {buttonContent}
74        </TooltipTrigger>
75        <TooltipContent>
76          {copied ? successTooltipText : tooltipText}
77        </TooltipContent>
78      </Tooltip>
79    </TooltipProvider>
80  );
81}