copy-button

1"use client";
2import { cn } from "@/lib/utils";
3import type React from "react";
4import { useCopyToClipboard } from "@/hooks/use-copy-to-clipboard";
5import { Button } from "@/components/ui/button";
6import {
7	Tooltip,
8	TooltipContent,
9	TooltipTrigger,
10} from "@/components/ui/tooltip";
11 
12type CopyButtonProps = React.ComponentProps<typeof Button> & {
13	text: string;
14	disableTooltip?: boolean;
15};
16 
17export function CopyButton({
18	variant = "ghost",
19	size = "icon-sm",
20	text,
21	onClick,
22	disableTooltip = false,
23	...props
24}: CopyButtonProps) {
25	const { copied, copy } = useCopyToClipboard();
26 
27	const handleCopy = (event: React.MouseEvent<HTMLButtonElement>) => {
28		copy(text);
29		onClick?.(event); // ✅ pass event to onClick
30	};
31 
32	return (
33		<Tooltip>
34			<TooltipTrigger asChild>
35				<Button
36					aria-label={copied ? "Copied" : "Copy to clipboard"}
37					disabled={copied || props.disabled}
38					onClick={handleCopy}
39					size={size}
40					variant={variant}
41					{...props}
42				>
43					<div
44						className={cn(
45							"transition-all",
46							copied ? "scale-100 opacity-100" : "scale-0 opacity-0"
47						)}
48					>
49						<IconPlaceholder
50							aria-hidden="true"
51							className="size-3.5 stroke-emerald-500"
52							hugeicons="Tick01Icon"
53							lucide="CheckIcon"
54							phosphor="CheckIcon"
55							remixicon="RiCheckLine"
56							tabler="IconCheck"
57						/>
58					</div>
59					<div
60						className={cn(
61							"absolute transition-all",
62							copied ? "scale-0 opacity-0" : "scale-100 opacity-100"
63						)}
64					>
65						<IconPlaceholder
66							aria-hidden="true"
67							className="size-3.5"
68							hugeicons="Copy01Icon"
69							lucide="CopyIcon"
70							phosphor="CopyIcon"
71							remixicon="RiFileCopyLine"
72							tabler="IconCopy"
73						/>
74					</div>
75				</Button>
76			</TooltipTrigger>
77			{!disableTooltip && (
78				<TooltipContent className="px-2 py-1 text-xs">
79					Click to copy
80				</TooltipContent>
81			)}
82		</Tooltip>
83	);
84}