function MainComponent() { const [formData, setFormData] = useState({ course: "", subject: "", target_audience: "", language: "", special_notes: "" }); const [words, setWords] = useState(null); const [error, setError] = useState(null); const [loading, setLoading] = useState(false); const [qrCode, setQrCode] = useState(null); const [wordSearchId, setWordSearchId] = useState(null); const handleInputChange = (e)=>{ const { name, value } = e.target; setFormData((prev)=>({ ...prev, [name]: value })); setError(null); }; const validateInput = ()=>{ if (!formData.language.trim()) { setError("Vul een taal in"); return false; } if (!formData.target_audience.trim()) { setError("Vul een doelgroep in"); return false; } return true; }; const handleDemo = ()=>{ setFormData({ course: "Geschiedenis", subject: "Tweede Wereldoorlog", target_audience: "Groep 7", language: "Nederlands", special_notes: "Alleen korte woorden" }); setError(null); }; const handleGenerate = async ()=>{ setError(null); if (!validateInput()) { return; } setLoading(true); try { const response = await fetch("/api/generate-word-search", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify(formData) }); if (!response.ok) { throw new Error(`Er ging iets mis bij het genereren van de woordzoeker (${response.status})`); } const data = await response.json(); if (data.error) { throw new Error(data.error); } if (!data.word_search || !data.word_search.words) { throw new Error("De gegenereerde woordzoeker heeft een ongeldig formaat"); } setWords(data.word_search.words); setWordSearchId(data.word_search.id); } catch (err) { console.error("Error generating word search:", err); setError(err.message || "Er ging iets mis bij het genereren van de woordzoeker"); } finally{ setLoading(false); } }; const handlePublish = async ()=>{ if (!wordSearchId) { setError("Geen woordzoeker gevonden om te publiceren"); return; } try { const publishResponse = await fetch(`/api/publish-word-search`, { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ id: wordSearchId }) }); if (!publishResponse.ok) { throw new Error("Kon de woordzoeker niet publiceren"); } const response = await fetch("/api/qr-code-generator", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ url: `${window.location.origin}/p?id=${wordSearchId}` }) }); if (!response.ok) { throw new Error("Failed to generate QR code"); } const data = await response.json(); setQrCode(data.body); } catch (err) { setError(err.message); } }; const handleClearFields = ()=>{ setFormData({ course: "", subject: "", target_audience: "", language: "", special_notes: "" }); setError(null); }; useEffect(()=>{ document.title = "Woordzoekergenerator"; }, []); return /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 152, columnNumber: 7 }, __self: this }, ` body { margin: 0; padding: 0; background-color: #143f31; } `), /*#__PURE__*/ React.createElement("div", { className: "min-h-screen p-4 max-w-4xl mx-auto", style: { backgroundColor: "#143f31" }, __source: { fileName: "", lineNumber: 159, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-center mb-2", __source: { fileName: "", lineNumber: 163, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center", __source: { fileName: "", lineNumber: 164, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-3xl font-bold", style: { color: "#ffffff" }, __source: { fileName: "", lineNumber: 165, columnNumber: 13 }, __self: this }, "Woordzoekergenerator"), /*#__PURE__*/ React.createElement("div", { style: { width: "24px" }, __source: { fileName: "", lineNumber: 168, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("button", { onClick: handleDemo, className: "px-4 py-2 rounded hover:opacity-90", style: { backgroundColor: "#1d4c3e", color: "#ffffff", border: "2px solid #3a7171" }, __source: { fileName: "", lineNumber: 169, columnNumber: 13 }, __self: this }, "Demo"), /*#__PURE__*/ React.createElement("div", { className: "ml-2", __source: { fileName: "", lineNumber: 180, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: handleClearFields, className: "px-4 py-2 rounded hover:opacity-90", style: { backgroundColor: "#1d4c3e", color: "#ffffff", border: "2px solid #3a7171" }, __source: { fileName: "", lineNumber: 181, columnNumber: 15 }, __self: this }, "Maak alle velden leeg"))), /*#__PURE__*/ React.createElement("div", { className: "flex items-center gap-4", __source: { fileName: "", lineNumber: 194, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "https://robertsdigitaledidactiek.created.app/", className: "text-2xl hover:opacity-80", __source: { fileName: "", lineNumber: 195, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("span", { role: "img", "aria-label": "Tools", style: { fontSize: "24px", color: "#e0d4bc" }, __source: { fileName: "", lineNumber: 199, columnNumber: 15 }, __self: this }, "⚒️")), /*#__PURE__*/ React.createElement("a", { href: "https://www.digitaledidactiek.com", className: "text-2xl font-bold hover:opacity-80", style: { color: "#ffffff" }, __source: { fileName: "", lineNumber: 207, columnNumber: 13 }, __self: this }, "✕"))), /*#__PURE__*/ React.createElement("div", { className: "text-lg mb-6", style: { color: "#ffffff" }, __source: { fileName: "", lineNumber: 217, columnNumber: 9 }, __self: this }, "door Robert Mol,", " ", /*#__PURE__*/ React.createElement("a", { href: "https://www.digitaledidactiek.com", style: { color: "#e0d4bc", textDecoration: "underline" }, __source: { fileName: "", lineNumber: 219, columnNumber: 11 }, __self: this }, "www.digitaledidactiek.com")), /*#__PURE__*/ React.createElement("div", { className: "rounded-lg shadow p-6 mb-6", style: { backgroundColor: "#1d4c3e" }, __source: { fileName: "", lineNumber: 227, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4 mb-4", __source: { fileName: "", lineNumber: 231, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 232, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-bold mb-1", style: { color: "#ffffff" }, __source: { fileName: "", lineNumber: 233, columnNumber: 15 }, __self: this }, formData.language === "English" ? "Subject Area" : formData.language === "Deutsch" ? "Fach" : "Vak"), /*#__PURE__*/ React.createElement("input", { type: "text", name: "course", value: formData.course, onChange: handleInputChange, className: "w-full p-2 border rounded", style: { backgroundColor: "#143f31", borderColor: "#3a7171", color: "#e0d4bc" }, placeholder: formData.language === "English" ? "e.g. History" : formData.language === "Deutsch" ? "z.B. Geschichte" : "bijv. Geschiedenis", __source: { fileName: "", lineNumber: 243, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 263, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-bold mb-1", style: { color: "#ffffff" }, __source: { fileName: "", lineNumber: 264, columnNumber: 15 }, __self: this }, formData.language === "English" ? "Topic" : formData.language === "Deutsch" ? "Thema" : "Onderwerp"), /*#__PURE__*/ React.createElement("input", { type: "text", name: "subject", value: formData.subject, onChange: handleInputChange, className: "w-full p-2 border rounded", style: { backgroundColor: "#143f31", borderColor: "#3a7171", color: "#e0d4bc" }, placeholder: formData.language === "English" ? "e.g. World War II" : formData.language === "Deutsch" ? "z.B. Zweiter Weltkrieg" : "bijv. Tweede Wereldoorlog", __source: { fileName: "", lineNumber: 274, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 294, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-bold mb-1", style: { color: "#ffffff" }, __source: { fileName: "", lineNumber: 295, columnNumber: 15 }, __self: this }, formData.language === "English" ? "Target Group" : formData.language === "Deutsch" ? "Zielgruppe" : "Doelgroep"), /*#__PURE__*/ React.createElement("input", { type: "text", name: "target_audience", value: formData.target_audience, onChange: handleInputChange, className: "w-full p-2 border rounded", style: { backgroundColor: "#143f31", borderColor: "#3a7171", color: "#e0d4bc" }, placeholder: formData.language === "English" ? "e.g. Grade 7, High School, Adults" : formData.language === "Deutsch" ? "z.B. Klasse 7, Gymnasium, Erwachsene" : "bijv. Groep 7, MBO, Volwassenen", __source: { fileName: "", lineNumber: 305, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 325, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-bold mb-1", style: { color: "#ffffff" }, __source: { fileName: "", lineNumber: 326, columnNumber: 15 }, __self: this }, formData.language === "English" ? "Language" : formData.language === "Deutsch" ? "Sprache" : "Taal"), /*#__PURE__*/ React.createElement("input", { type: "text", name: "language", value: formData.language, onChange: handleInputChange, className: "w-full p-2 border rounded", style: { backgroundColor: "#143f31", borderColor: "#3a7171", color: "#e0d4bc" }, placeholder: formData.language === "English" ? "e.g. English, Dutch, German" : formData.language === "Deutsch" ? "z.B. Deutsch, Niederländisch, Englisch" : "bijv. Nederlands, Engels, Duits", __source: { fileName: "", lineNumber: 336, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "md:col-span-2", __source: { fileName: "", lineNumber: 356, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-bold mb-1", style: { color: "#ffffff" }, __source: { fileName: "", lineNumber: 357, columnNumber: 15 }, __self: this }, formData.language === "English" ? "Special Notes" : formData.language === "Deutsch" ? "Besonderheiten" : "Bijzonderheden"), /*#__PURE__*/ React.createElement("input", { type: "text", name: "special_notes", value: formData.special_notes, onChange: handleInputChange, className: "w-full p-2 border rounded", style: { backgroundColor: "#143f31", borderColor: "#3a7171", color: "#e0d4bc" }, placeholder: formData.language === "English" ? "e.g. Only short words" : formData.language === "Deutsch" ? "z.B. Nur kurze Wörter" : "bijv. Alleen korte woorden", __source: { fileName: "", lineNumber: 367, columnNumber: 15 }, __self: this }))), /*#__PURE__*/ React.createElement("button", { onClick: handleGenerate, disabled: loading, className: "px-4 py-2 rounded hover:opacity-90 disabled:opacity-50", style: { backgroundColor: "#1d4c3e", border: "2px solid #3a7171", color: "#ffffff" }, __source: { fileName: "", lineNumber: 389, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("span", { style: { display: "inline-block" }, __source: { fileName: "", lineNumber: 399, columnNumber: 13 }, __self: this }, loading ? formData.language === "English" ? "Generating..." : formData.language === "Deutsch" ? "Generieren..." : "Genereren..." : formData.language === "English" ? "Generate" : formData.language === "Deutsch" ? "Generieren" : "Genereer"))), error && /*#__PURE__*/ React.createElement("div", { className: "border px-4 py-3 rounded mb-4", style: { backgroundColor: "#1d4c3e", borderColor: "#3a7171", color: "#e0d4bc" }, __source: { fileName: "", lineNumber: 416, columnNumber: 11 }, __self: this }, formData.language === "English" ? error === "Vul een taal in" ? "Please enter a language" : error === "Vul een doelgroep in" ? "Please enter a target group" : error : formData.language === "Deutsch" ? error === "Vul een taal in" ? "Bitte geben Sie eine Sprache ein" : error === "Vul een doelgroep in" ? "Bitte geben Sie eine Zielgruppe ein" : error : error), words && /*#__PURE__*/ React.createElement("div", { className: "rounded-lg shadow p-6", style: { backgroundColor: "#1d4c3e" }, __source: { fileName: "", lineNumber: 441, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-semibold mb-4", style: { color: "#ffffff" }, __source: { fileName: "", lineNumber: 445, columnNumber: 13 }, __self: this }, formData.language === "English" ? "Generated Words" : formData.language === "Deutsch" ? "Generierte Wörter" : "Gegenereerde Woorden"), /*#__PURE__*/ React.createElement("div", { className: "space-y-2", __source: { fileName: "", lineNumber: 455, columnNumber: 13 }, __self: this }, words.map((item, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "flex items-center justify-between p-2 rounded", style: { backgroundColor: "#143f31" }, __source: { fileName: "", lineNumber: 457, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 462, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "font-medium", style: { color: "#ffffff" }, __source: { fileName: "", lineNumber: 463, columnNumber: 21 }, __self: this }, item.word), /*#__PURE__*/ React.createElement("span", { className: "mx-2", style: { color: "#ffffff" }, __source: { fileName: "", lineNumber: 466, columnNumber: 21 }, __self: this }, "-"), /*#__PURE__*/ React.createElement("span", { style: { color: "#e0d4bc" }, __source: { fileName: "", lineNumber: 469, columnNumber: 21 }, __self: this }, item.definition)), /*#__PURE__*/ React.createElement("button", { onClick: ()=>handleRemoveWord(index), className: "hover:opacity-80", style: { color: "#ff0000" }, __source: { fileName: "", lineNumber: 471, columnNumber: 19 }, __self: this }, formData.language === "English" ? "Remove" : formData.language === "Deutsch" ? "Entfernen" : "Verwijder")))), /*#__PURE__*/ React.createElement("button", { onClick: handlePublish, className: "mt-4 px-4 py-2 rounded hover:opacity-90", style: { backgroundColor: "#1d4c3e", color: "#ffffff", border: "2px solid #3a7171" }, __source: { fileName: "", lineNumber: 486, columnNumber: 13 }, __self: this }, formData.language === "English" ? "Publish" : formData.language === "Deutsch" ? "Veröffentlichen" : "Publiceer"), qrCode && /*#__PURE__*/ React.createElement("div", { className: "mt-8 text-center", __source: { fileName: "", lineNumber: 503, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-xl mb-4", style: { color: "#ffffff" }, __source: { fileName: "", lineNumber: 504, columnNumber: 17 }, __self: this }, formData.language === "English" ? "Scan the QR code to open the word search:" : formData.language === "Deutsch" ? "Scannen Sie den QR-Code, um das Wortsuchrätsel zu öffnen:" : "Scan de QR code om de woordzoeker te openen:"), /*#__PURE__*/ React.createElement("img", { src: `data:image/png;base64,${qrCode}`, alt: "QR Code", className: "mx-auto", style: { width: "300px", height: "300px" }, __source: { fileName: "", lineNumber: 511, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "mt-4", __source: { fileName: "", lineNumber: 517, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "mb-2", style: { color: "#ffffff" }, __source: { fileName: "", lineNumber: 518, columnNumber: 19 }, __self: this }, formData.language === "English" ? "Or use this link:" : formData.language === "Deutsch" ? "Oder benutzen Sie diesen Link:" : "Of gebruik deze link:"), /*#__PURE__*/ React.createElement("a", { href: `/p?id=${wordSearchId}`, target: "_blank", rel: "noopener noreferrer", className: "text-lg", style: { color: "#ffffff", textDecoration: "underline" }, __source: { fileName: "", lineNumber: 525, columnNumber: 19 }, __self: this }, formData.language === "English" ? "Click here to open the word search" : formData.language === "Deutsch" ? "Klicken Sie hier, um das Wortsuchrätsel zu öffnen" : "Klik hier om de woordzoeker te openen")))))); }