import pageData from "~/data/url-qr-code.json"; import { toast } from "sonner"; export function UrlQrGenerator() { const { data, updateData } = useData(pageData); const [url, setUrl] = React.useState(""); const [qrCodeUrl, setQrCodeUrl] = React.useState(""); const [isLoading, setIsLoading] = React.useState(false); const generateQrCode = async () => { if (!url.trim()) { toast("Please enter a URL"); return; } setIsLoading(true); try { // Using QR Server API for QR code generation const qrUrl = `https://api.qrserver.com/v1/create-qr-code/?size=300x300&data=${encodeURIComponent(url)}`; setQrCodeUrl(qrUrl); // Save to persistent data updateData({ ...data, lastUrl: url, lastQrCode: qrUrl, history: [...(data.history || []), { url, qrCode: qrUrl, timestamp: new Date().toISOString() }] }); toast("QR code generated successfully!"); } catch (error) { toast("Failed to generate QR code"); } finally { setIsLoading(false); } }; const downloadQrCode = () => { if (!qrCodeUrl) return; const link = document.createElement("a"); link.href = qrCodeUrl; link.download = `qr-code-${Date.now()}.png`; document.body.appendChild(link); link.click(); document.body.removeChild(link); }; const clearQrCode = () => { setUrl(""); setQrCodeUrl(""); }; // Load last URL from data React.useEffect(() => { if (data.lastUrl) { setUrl(data.lastUrl); } if (data.lastQrCode) { setQrCodeUrl(data.lastQrCode); } }, [data]); return ( URL to QR Code Generator Enter any URL to generate a QR code that can be scanned by mobile devices

Enter URL

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

{qrCodeUrl && (

QR Code for: {url}

)} {data.history && data.history.length > 0 && (

Recent URLs

{data.history.slice(-5).reverse().map((item, index) => (

{ setUrl(item.url); setQrCodeUrl(item.qrCode); }} > {item.url} {new Date(item.timestamp).toLocaleDateString()}

))}

)} ); }