/** @jsxImportSource https://esm.sh/react */ import React, { useState } from "https://esm.sh/react"; import { createRoot } from "https://esm.sh/react-dom/client"; function App() { const [text, setText] = useState(""); const [qrCode, setQrCode] = useState(""); const generateQR = async () => { if (text) { const qr = await import("https://esm.sh/qrcode-generator"); const qrCode = qr.default(0, "L"); qrCode.addData(text); qrCode.make(); const svgString = qrCode.createSvgTag({ cellSize: 4, margin: 4 }); setQrCode(svgString); } }; return (

QR Code Generator

setText(e.target.value)} placeholder="Enter text for QR code" /> {qrCode &&

}

); } function client() { createRoot(document.getElementById("root")).render(); } if (typeof document !== "undefined") { client(); } export default async function server(request: Request): Promise { return new Response( ` QR Code Generator

`, { headers: { "Content-Type": "text/html" }, }, ); } const css = ` body { font-family: 'Inter', sans-serif; display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; background-color: #f7f7f7; } .container { background-color: white; padding: 2rem; border-radius: 12px; box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1); text-align: center; max-width: 400px; width: 100%; box-sizing: border-box; } h1 { font-size: 2rem; margin-bottom: 1.5rem; color: #333; } input { width: 100%; padding: 0.75rem; margin: 1rem 0; border: 1px solid #ddd; border-radius: 6px; font-size: 1rem; } button { background-color: #007bff; color: white; border: none; padding: 0.75rem 1.25rem; font-size: 1rem; border-radius: 6px; cursor: pointer; transition: background-color 0.3s; } button:hover { background-color: #0056b3; } svg { margin-top: 1.5rem; } p { margin-top: 1rem; font-size: 0.875rem; } a { color: #007bff; text-decoration: none; } a:hover { text-decoration: underline; } `;

QR_Generator