fix: enhance clipboard functionality with fallback (#264)

src/hooks/useClipboard.ts

@@ -10,11 +10,41 @@ export default function useClipboard(
   const [hasCopied, setHasCopied] = useState(false)
 
   const onCopy = useCallback(() => {
-    navigator.clipboard.writeText(text).then(() => {
+    if (navigator.clipboard && navigator.clipboard.writeText) {
+      navigator.clipboard
+        .writeText(text)
+        .then(() => {
           setHasCopied(true)
         })
+        .catch((error) => {
+          console.error('Clipboard API error:', error)
+          fallbackCopyText(text)
+        })
+    } else {
+      fallbackCopyText(text)
+    }
   }, [text])
 
+  const fallbackCopyText = (textToCopy: string) => {
+    const textArea = document.createElement('textarea')
+    textArea.value = textToCopy
+
+    textArea.style.position = 'absolute'
+    textArea.style.left = '-999999px'
+
+    document.body.appendChild(textArea)
+    textArea.select()
+
+    try {
+      document.execCommand('copy')
+      setHasCopied(true)
+    } catch (error) {
+      console.error('execCommand:', error)
+    } finally {
+      textArea.remove()
+    }
+  }
+
   useEffect(() => {
     let timeoutId: NodeJS.Timeout
     if (hasCopied) {