feat: add copy button

This commit is contained in:
Henry Li
2026-01-16 19:50:23 +08:00
parent b5dcb2b1d3
commit 574b7e59ce

View File

@@ -0,0 +1,37 @@
import { CheckIcon, CopyIcon } from "lucide-react";
import { useCallback, useState, type ComponentProps } from "react";
import { Button } from "@/components/ui/button";
import { Tooltip } from "./tooltip";
export function CopyButton({
clipboardData,
...props
}: ComponentProps<typeof Button> & {
clipboardData: string;
}) {
const [copied, setCopied] = useState(false);
const handleCopy = useCallback(() => {
void navigator.clipboard.writeText(clipboardData);
setCopied(true);
setTimeout(() => setCopied(false), 2000);
}, [clipboardData]);
return (
<Tooltip content="Copy to clipboard">
<Button
size="icon-sm"
type="button"
variant="ghost"
onClick={handleCopy}
{...props}
>
{copied ? (
<CheckIcon className="text-green-500" size={12} />
) : (
<CopyIcon size={12} />
)}
</Button>
</Tooltip>
);
}