44 lines
1.0 KiB
TypeScript
44 lines
1.0 KiB
TypeScript
"use client";
|
|
|
|
import { useState } from "react";
|
|
import { Check, Copy } from "lucide-react";
|
|
|
|
interface CopyButtonProps {
|
|
value: string;
|
|
label?: string;
|
|
}
|
|
|
|
export function CopyButton({ value, label = "Salin" }: CopyButtonProps) {
|
|
const [copied, setCopied] = useState(false);
|
|
|
|
async function handleClick() {
|
|
try {
|
|
await navigator.clipboard.writeText(value);
|
|
setCopied(true);
|
|
setTimeout(() => setCopied(false), 1500);
|
|
} catch {
|
|
// ignore — user can copy manually
|
|
}
|
|
}
|
|
|
|
return (
|
|
<button
|
|
type="button"
|
|
onClick={handleClick}
|
|
className="inline-flex items-center gap-1 rounded-lg border border-neutral-200 bg-white px-2.5 py-1 text-xs font-medium text-neutral-600 transition-colors hover:bg-neutral-50"
|
|
>
|
|
{copied ? (
|
|
<>
|
|
<Check size={13} strokeWidth={2.5} aria-hidden className="text-emerald-600" />
|
|
Tersalin
|
|
</>
|
|
) : (
|
|
<>
|
|
<Copy size={13} strokeWidth={1.75} aria-hidden />
|
|
{label}
|
|
</>
|
|
)}
|
|
</button>
|
|
);
|
|
}
|