'use client' import { useCopyToClipboard } from "@/components/hooks/use-copy-to-clipboard" import { Button } from "@/components/ui/button" import { Card } from "@/components/ui/card" import { Check, Copy, ClipboardX } from "lucide-react" import { useEffect, useState } from "react" import { toast } from "sonner" const SAMPLE_TEXTS = [ { label: 'Short Text', content: 'Hello, World!' }, { label: 'URL', content: 'https://example.com/very/long/url/path' }, { label: 'Code Snippet', content: 'const greeting = "Hello, World!";' }, ] export function UseCopyToClipboardDemo() { const [copiedText, copy] = useCopyToClipboard() const [lastCopiedId, setLastCopiedId] = useState(null) const handleCopy = async (text: string, id: number) => { try { const success = await copy(text) if (success) { setLastCopiedId(id) toast.success('Текст скопирован в буфер обмена') // Reset copied state after 2 seconds setTimeout(() => { setLastCopiedId(null) }, 2000) } else { toast.error('Не удалось скопировать текст') } } catch (error) { toast.error('Произошла ошибка при копировании') console.error('Copy failed:', error) } } // Reset copied state when component unmounts useEffect(() => { return () => setLastCopiedId(null) }, []) return (

{/* Header */}

Copy to Clipboard Demo

Click on any item below to copy its content to clipboard

{/* Copy Items */}

{SAMPLE_TEXTS.map((item, index) => (

{item.label}


                  {item.content}

))}

{/* Status Display */}

Last copied value:

{copiedText ? (


              {copiedText}

) : ( Nothing copied yet )}

{/* Documentation */}

Hook Usage:

{`const [copiedText, copy] = useCopyToClipboard()

// Copy text
await copy("Text to copy")

// Check last copied text
console.log(copiedText) // null if nothing copied`}

) }