function MainComponent() { const [url, setUrl] = useState(""); const [qrCode, setQrCode] = useState(""); const generateQRCode = async ()=>{ if (!url) return; try { const response = await fetch(`/integrations/qr-code/generatebasicbase64?data=${encodeURIComponent(url)}&size=300`); const base64Data = await response.text(); setQrCode(base64Data); } catch (error) { console.error("Error generating QR code:", error); } }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen p-8", style: { backgroundColor: "#143f31" }, __source: { fileName: "", lineNumber: 20, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-md mx-auto rounded-lg shadow-lg p-6 relative", style: { backgroundColor: "#1d4c3e" }, __source: { fileName: "", lineNumber: 21, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "absolute top-2 right-2 flex gap-2", __source: { fileName: "", lineNumber: 25, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "https://robertsdigitaledidactiek.created.app", className: "w-6 h-6 flex items-center justify-center rounded-full", style: { backgroundColor: "#e0d4bc", color: "black" }, __source: { fileName: "", lineNumber: 26, columnNumber: 11 }, __self: this }, "🛠️"), /*#__PURE__*/ React.createElement("a", { href: "https://www.digitaledidactiek.com", className: "w-6 h-6 flex items-center justify-center rounded-full", style: { backgroundColor: "#e0d4bc", color: "black" }, __source: { fileName: "", lineNumber: 33, columnNumber: 11 }, __self: this }, "X")), /*#__PURE__*/ React.createElement("div", { className: "space-y-4", __source: { fileName: "", lineNumber: 41, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "url", value: url, onChange: (e)=>setUrl(e.target.value), placeholder: "Voer een URL in...", className: "w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500", style: { color: "#e0d4bc", backgroundColor: "#1d4c3e", borderColor: "#e0d4bc", "::placeholder": { color: "#e0d4bc" } }, __source: { fileName: "", lineNumber: 42, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("button", { onClick: generateQRCode, className: "w-full py-2 rounded-lg transition-colors", style: { backgroundColor: "#143f31", color: "white" }, __source: { fileName: "", lineNumber: 57, columnNumber: 11 }, __self: this }, "Maak QR Code"), qrCode && /*#__PURE__*/ React.createElement("div", { className: "mt-6 flex justify-center", __source: { fileName: "", lineNumber: 66, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: `data:image/png;base64,${qrCode}`, alt: "Gegenereerde QR code", className: "w-[300px] h-[300px]", __source: { fileName: "", lineNumber: 67, columnNumber: 15 }, __self: this }))))); }