function NoteInput({ onSave, initialText = "", onProcess }) { const [notes, setNotes] = useState(initialText); const [error, setError] = useState(null); const [upload, { loading }] = useUpload(); const [images, setImages] = useState([]); const [savedStatus, setSavedStatus] = useState(""); useEffect(()=>{ const timeoutId = setTimeout(()=>{ handleSave(); }, 1000); return ()=>clearTimeout(timeoutId); }, [ notes ]); const handleSave = ()=>{ onSave?.(notes); setSavedStatus("Sparad"); setTimeout(()=>setSavedStatus(""), 2000); }; const handleFileUpload = async (e)=>{ const file = e.target.files[0]; if (file) { const { url, error } = await upload({ file }); if (error) { setError(error); return; } setImages([ ...images, url ]); } }; const handleProcess = ()=>{ onProcess?.(images); }; return /*#__PURE__*/ React.createElement("div", { className: "p-4 max-w-xl", __source: { fileName: "", lineNumber: 38, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "relative", __source: { fileName: "", lineNumber: 39, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("textarea", { name: "study-notes", value: notes, onChange: (e)=>setNotes(e.target.value), className: "w-full h-[200px] p-3 border rounded-lg font-roboto resize-y mb-4", placeholder: "Skriv dina anteckningar här...", __source: { fileName: "", lineNumber: 40, columnNumber: 9 }, __self: this }), savedStatus && /*#__PURE__*/ React.createElement("div", { className: "absolute top-2 right-2 bg-green-100 text-green-800 px-2 py-1 rounded text-sm font-roboto", __source: { fileName: "", lineNumber: 48, columnNumber: 11 }, __self: this }, savedStatus)), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 54, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block mb-2 font-roboto", __source: { fileName: "", lineNumber: 55, columnNumber: 9 }, __self: this }, "Lägg till bilder"), /*#__PURE__*/ React.createElement("input", { type: "file", accept: "image/*", capture: "environment", onChange: handleFileUpload, className: "mb-2", __source: { fileName: "", lineNumber: 56, columnNumber: 9 }, __self: this }), error && /*#__PURE__*/ React.createElement("div", { className: "text-red-500 mb-2 font-roboto", __source: { fileName: "", lineNumber: 64, columnNumber: 19 }, __self: this }, error), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-2 gap-2 mb-4", __source: { fileName: "", lineNumber: 66, columnNumber: 9 }, __self: this }, images.map((url, index)=>/*#__PURE__*/ React.createElement("img", { key: index, src: url, alt: `Uppladdad bild ${index + 1}`, className: "w-full h-[150px] object-cover rounded-lg", __source: { fileName: "", lineNumber: 68, columnNumber: 13 }, __self: this })))), /*#__PURE__*/ React.createElement("div", { className: "flex gap-2", __source: { fileName: "", lineNumber: 78, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: handleSave, className: "bg-blue-500 text-white px-6 py-2 rounded-lg hover:bg-blue-600 font-roboto inline-block", __source: { fileName: "", lineNumber: 79, columnNumber: 9 }, __self: this }, "Spara"), images.length > 0 && /*#__PURE__*/ React.createElement("button", { onClick: handleProcess, disabled: loading, className: "bg-green-500 text-white px-6 py-2 rounded-lg hover:bg-green-600 font-roboto inline-block disabled:opacity-50", __source: { fileName: "", lineNumber: 86, columnNumber: 11 }, __self: this }, loading ? "Bearbetar..." : "Bearbeta bilder"))); } function NoteInput1() { const [notes, setNotes] = useState(""); const [images, setImages] = useState([]); const [loading, setLoading] = useState(false); const [quizId, setQuizId] = useState(null); const handleGenerateQuiz = async ()=>{ setLoading(true); try { const response = await fetch("/api/generate-quiz", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ text: notes, imageUrls: images }) }); const data = await response.json(); if (data.success) { setQuizId(data.id); } } catch (error) { console.error(error); } setLoading(false); }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-gradient-to-b from-[#f8f9fa] to-[#e9ecef] p-4", __source: { fileName: "", lineNumber: 124, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-4xl mx-auto", __source: { fileName: "", lineNumber: 125, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-4xl font-roboto text-[#2d3748] mb-8 text-center", __source: { fileName: "", lineNumber: 126, columnNumber: 9 }, __self: this }, "Mina Anteckningar"), /*#__PURE__*/ React.createElement(NoteInput, { onSave: setNotes, onProcess: setImages, __source: { fileName: "", lineNumber: 130, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "mt-6 flex justify-center gap-4", __source: { fileName: "", lineNumber: 132, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: handleGenerateQuiz, disabled: loading || !notes, className: "bg-[#4a90e2] text-white px-6 py-3 rounded-lg hover:bg-[#357abd] font-roboto disabled:opacity-50 disabled:cursor-not-allowed", __source: { fileName: "", lineNumber: 133, columnNumber: 11 }, __self: this }, loading ? /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("i", { className: "fas fa-spinner fa-spin mr-2", __source: { fileName: "", lineNumber: 140, columnNumber: 17 }, __self: this }), "Genererar Quiz...") : "Skapa Quiz från Anteckningar"), quizId && /*#__PURE__*/ React.createElement("a", { href: "/quiz", className: "bg-green-500 text-white px-6 py-3 rounded-lg hover:bg-green-600 font-roboto inline-flex items-center", __source: { fileName: "", lineNumber: 149, columnNumber: 13 }, __self: this }, "Gå till Quiz", /*#__PURE__*/ React.createElement("i", { className: "fas fa-arrow-right ml-2", __source: { fileName: "", lineNumber: 154, columnNumber: 15 }, __self: this }))))); } function NoteInput1Story() { const [savedNotes, setSavedNotes] = useState(""); const [processedImages, setProcessedImages] = useState(0); return /*#__PURE__*/ React.createElement("div", { className: "p-4", __source: { fileName: "", lineNumber: 168, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(NoteInput, { onSave: (notes)=>setSavedNotes(notes), onProcess: (images)=>setProcessedImages(images.length), initialText: "Här är några exempel-anteckningar", __source: { fileName: "", lineNumber: 169, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "mt-8", __source: { fileName: "", lineNumber: 174, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement(NoteInput, { onSave: (notes)=>setSavedNotes(notes), onProcess: (images)=>setProcessedImages(images.length), __source: { fileName: "", lineNumber: 175, columnNumber: 9 }, __self: this }))); } function QuizQuestion({ question, options, onSelect, selectedOption }) { return /*#__PURE__*/ React.createElement("div", { className: "p-6 rounded-lg bg-white shadow-md max-w-[600px]", __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-roboto mb-4 text-[#333333]", __source: { fileName: "", lineNumber: 4, columnNumber: 7 }, __self: this }, question), /*#__PURE__*/ React.createElement("div", { className: "space-y-3", __source: { fileName: "", lineNumber: 5, columnNumber: 7 }, __self: this }, options.map((option)=>/*#__PURE__*/ React.createElement("button", { key: option, onClick: ()=>onSelect(option), className: `w-full text-left p-3 rounded-md transition-colors ${selectedOption === option ? "bg-[#4A90E2] text-white" : "bg-[#F5F5F5] text-[#333333] hover:bg-[#E5E5E5]"}`, __source: { fileName: "", lineNumber: 7, columnNumber: 11 }, __self: this }, option)))); } function QuizQuestion1({ question, options, onSelect, selectedOption }) { return /*#__PURE__*/ React.createElement(QuizQuestion, { question: question, options: options, onSelect: onSelect, selectedOption: selectedOption, __source: { fileName: "", lineNumber: 26, columnNumber: 5 }, __self: this }); } function QuizQuestion1Story() { const [selected, setSelected] = React.useState(null); return /*#__PURE__*/ React.createElement("div", { className: "p-4 bg-[#F0F2F5]", __source: { fileName: "", lineNumber: 39, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(QuizQuestion1, { question: "Vilken är Sveriges huvudstad?", options: [ "Stockholm", "Göteborg", "Malmö", "Uppsala" ], selectedOption: selected, onSelect: setSelected, __source: { fileName: "", lineNumber: 40, columnNumber: 7 }, __self: this })); } function MainComponent() { const [notes, setNotes] = useState(""); const [images, setImages] = useState([]); const [loading, setLoading] = useState(false); const [quizId, setQuizId] = useState(null); const [successMessage, setSuccessMessage] = useState(""); const handleGenerateQuiz = async ()=>{ setLoading(true); setSuccessMessage(""); try { const response = await fetch("/api/generate-quiz", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ text: notes, imageUrls: images }) }); const data = await response.json(); if (data.success) { setQuizId(data.id); setSuccessMessage("Quiz har skapats framgångsrikt!"); } } catch (error) { console.error(error); } setLoading(false); }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-gradient-to-b from-[#f8f9fa] to-[#e9ecef] p-8", __source: { fileName: "", lineNumber: 29, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-4xl mx-auto", __source: { fileName: "", lineNumber: 30, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-center mb-8", __source: { fileName: "", lineNumber: 31, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-4xl font-roboto text-[#2d3748]", __source: { fileName: "", lineNumber: 32, columnNumber: 11 }, __self: this }, "Anteckningar & Quiz"), /*#__PURE__*/ React.createElement("a", { href: "/quiz", className: "text-[#4a90e2] font-roboto hover:text-[#357abd] flex items-center", __source: { fileName: "", lineNumber: 35, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-list-ol mr-2", __source: { fileName: "", lineNumber: 39, columnNumber: 13 }, __self: this }), "Mina Quiz")), /*#__PURE__*/ React.createElement("div", { className: "bg-white rounded-lg shadow-lg p-6 mb-6", __source: { fileName: "", lineNumber: 44, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-roboto text-[#2d3748] mb-4", __source: { fileName: "", lineNumber: 45, columnNumber: 11 }, __self: this }, "Studera & Anteckna"), /*#__PURE__*/ React.createElement(NoteInput, { onSave: setNotes, onProcess: setImages, __source: { fileName: "", lineNumber: 48, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "bg-white rounded-lg shadow-lg p-6", __source: { fileName: "", lineNumber: 51, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center gap-4", __source: { fileName: "", lineNumber: 52, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: handleGenerateQuiz, disabled: loading || !notes, className: "bg-[#4a90e2] text-white px-8 py-3 rounded-lg hover:bg-[#357abd] font-roboto disabled:opacity-50 disabled:cursor-not-allowed transition-all duration-200 w-full md:w-auto", __source: { fileName: "", lineNumber: 53, columnNumber: 13 }, __self: this }, loading ? /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("i", { className: "fas fa-spinner fa-spin mr-2", __source: { fileName: "", lineNumber: 60, columnNumber: 19 }, __self: this }), "Genererar Quiz...") : /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("i", { className: "fas fa-magic mr-2", __source: { fileName: "", lineNumber: 65, columnNumber: 19 }, __self: this }), "Skapa Quiz från Anteckningar")), successMessage && /*#__PURE__*/ React.createElement("div", { className: "text-green-600 font-roboto flex items-center", __source: { fileName: "", lineNumber: 72, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-check-circle mr-2", __source: { fileName: "", lineNumber: 73, columnNumber: 17 }, __self: this }), successMessage), quizId && /*#__PURE__*/ React.createElement("a", { href: "/quiz", className: "bg-green-500 text-white px-8 py-3 rounded-lg hover:bg-green-600 font-roboto inline-flex items-center transition-all duration-200", __source: { fileName: "", lineNumber: 79, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-play mr-2", __source: { fileName: "", lineNumber: 83, columnNumber: 17 }, __self: this }), "Starta Quiz"))))); }