32 lines
1003 B
TypeScript
32 lines
1003 B
TypeScript
import { useEffect, useState } from 'react';
|
|
import { Check, Copy } from 'lucide-react';
|
|
import { IconButton } from './IconButton';
|
|
export function CopyButton({ value, label = '复制' }: { value: string; label?: string }) {
|
|
const [copied, setCopied] = useState(false);
|
|
useEffect(() => {
|
|
if (!copied) return;
|
|
const timer = window.setTimeout(() => setCopied(false), 1200);
|
|
return () => window.clearTimeout(timer);
|
|
}, [copied]);
|
|
return (
|
|
<IconButton
|
|
aria-label={copied ? '已复制' : label}
|
|
tooltip={copied ? '已复制' : label}
|
|
onClick={() =>
|
|
void (async () => {
|
|
try {
|
|
if (!navigator.clipboard?.writeText) return;
|
|
await navigator.clipboard.writeText(value);
|
|
setCopied(true);
|
|
} catch {
|
|
setCopied(false);
|
|
}
|
|
})()
|
|
}
|
|
className="h-5 w-5"
|
|
>
|
|
{copied ? <Check className="h-3 w-3 text-success" /> : <Copy className="h-3 w-3" />}
|
|
</IconButton>
|
|
);
|
|
}
|