/**
* CopyButton provides a reusable copy-to-clipboard button with visual feedback.
* Shows a clipboard icon that changes to a checkmark on successful copy.
*
* @example
*
*/
import { useState } from "react";
interface CopyButtonProps {
content: string;
label?: string;
className?: string;
}
export function CopyButton({
content,
label = "Copy",
className = "",
}: CopyButtonProps) {
const [copied, setCopied] = useState(false);
const handleCopy = async () => {
try {
// Use modern Clipboard API with fallback
if (navigator.clipboard && window.isSecureContext) {
await navigator.clipboard.writeText(content);
} else {
// Fallback for older browsers or non-HTTPS contexts
const textArea = document.createElement("textarea");
textArea.value = content;
textArea.style.position = "fixed";
textArea.style.left = "-999999px";
textArea.style.top = "-999999px";
document.body.appendChild(textArea);
textArea.focus();
textArea.select();
document.execCommand("copy");
textArea.remove();
}
setCopied(true);
setTimeout(() => setCopied(false), 2000);
} catch (err) {
console.error("Failed to copy:", err);
}
};
return (
);
}