fix: handle clipboard errors and cleanup timeout in CopyButton

This commit is contained in:
2026-05-27 23:23:44 +02:00
parent 7d2d597264
commit 0797dde39c

View File

@@ -1,6 +1,6 @@
"use client"; "use client";
import { useState } from "react"; import { useEffect, useRef, useState } from "react";
import { Check, Copy } from "lucide-react"; import { Check, Copy } from "lucide-react";
import { cn } from "@/lib/utils"; import { cn } from "@/lib/utils";
@@ -11,17 +11,30 @@ interface CopyButtonProps {
export function CopyButton({ text, className }: CopyButtonProps) { export function CopyButton({ text, className }: CopyButtonProps) {
const [copied, setCopied] = useState(false); const [copied, setCopied] = useState(false);
const timeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
useEffect(() => {
return () => {
if (timeoutRef.current) clearTimeout(timeoutRef.current);
};
}, []);
const handleCopy = async () => { const handleCopy = async () => {
if (copied) return;
try {
await navigator.clipboard.writeText(text); await navigator.clipboard.writeText(text);
setCopied(true); setCopied(true);
setTimeout(() => setCopied(false), 1500); timeoutRef.current = setTimeout(() => setCopied(false), 1500);
} catch {
// clipboard unavailable — silently no-op
}
}; };
return ( return (
<button <button
onClick={handleCopy} onClick={handleCopy}
title="Copy to clipboard" title="Copy to clipboard"
aria-label="Copy to clipboard"
className={cn( className={cn(
"inline-flex items-center justify-center rounded p-0.5 text-muted-foreground/60 transition-colors hover:text-muted-foreground", "inline-flex items-center justify-center rounded p-0.5 text-muted-foreground/60 transition-colors hover:text-muted-foreground",
className className