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