[V0_FILE]typescriptreact:file="components/copy-to-clipboard.tsx" isEdit="true" "use client" import { useState } from "react" import { Check, Copy } from "lucide-react" interface CopyToClipboardProps { text: string className?: string } export function CopyToClipboard({ text, className = "" }: CopyToClipboardProps) { const [isCopied, setIsCopied] = useState(false) const copyToClipboard = async () => { try { await navigator.clipboard.writeText(text) setIsCopied(true) setTimeout(() => setIsCopied(false), 2000) // Reset after 2 seconds } catch (err) { console.error("Failed to copy text: ", err) } } return ( ) } [V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" "use client" import { useState } from "react" import { CopyToClipboard } from "@/components/copy-to-clipboard" import { Moon, Sun } from "lucide-react" export default function Home() { const [isDarkMode, setIsDarkMode] = useState(false) const toggleDarkMode = () => { setIsDarkMode(!isDarkMode) } return (

Copy to Clipboard Demo

Click the button to copy the text:

Short text:


                Hello, World!

Long text:


                This is a longer piece of text that demonstrates how the copy to clipboard component works with
                multi-line content. It's useful for copying code snippets, paragraphs, or any other longer text content.

) }

About

Tags

Share

About

Tags

Share

More Templates Like This

About

Tags

Share

About

Tags

Share

More Templates Like This