[V0_FILE]typescriptreact:file="app/page.tsx" "use client" import { useState } from "react" import QRCode from "qrcode" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card" import { Label } from "@/components/ui/label" import { Download, RefreshCw } from "lucide-react" export default function QRCodeGenerator() { const [url, setUrl] = useState("") const [qrCode, setQrCode] = useState("") const [isGenerating, setIsGenerating] = useState(false) const [error, setError] = useState("") const generateQRCode = async () => { if (!url) { setError("Please enter a URL") return } try { setIsGenerating(true) setError("") // Simple URL validation let urlToEncode = url if (!/^https?:\/\//i.test(url)) { urlToEncode = `https://${url}` } const qrDataUrl = await QRCode.toDataURL(urlToEncode, { width: 300, margin: 2, }) setQrCode(qrDataUrl) } catch (err) { setError("Failed to generate QR code. Please check your URL.") console.error(err) } finally { setIsGenerating(false) } } const downloadQRCode = () => { if (!qrCode) return const link = document.createElement("a") link.href = qrCode link.download = "qrcode.png" document.body.appendChild(link) link.click() document.body.removeChild(link) } return (

QR Code Generator Enter a URL to generate a QR code

URL

setUrl(e.target.value)} onKeyDown={(e) => e.key === "Enter" && generateQRCode()} />

{error &&

{error}

}

{qrCode && (

)} Scan this QR code with a smartphone camera to open the URL

) }

About

Tags

Share

More from donvito

More Templates Like This

About

Tags

Share

About

Tags

Share

More from donvito

More Templates Like This