function MainComponent() { const [email, setEmail] = React.useState(''); const [isLoggedIn, setIsLoggedIn] = React.useState(false); const [notes, setNotes] = React.useState([]); const [folders, setFolders] = React.useState([]); const [isSelectingTemplate, setIsSelectingTemplate] = React.useState(false); const [currentCover, setCurrentCover] = React.useState('default'); const [currentTemplate, setCurrentTemplate] = React.useState('blank'); const [isCreatingNote, setIsCreatingNote] = React.useState(false); const [currentNote, setCurrentNote] = React.useState(null); const [currentTool, setCurrentTool] = React.useState('pen'); const [currentColor, setCurrentColor] = React.useState('#000000'); const [isRecording, setIsRecording] = React.useState(false); const [audioURL, setAudioURL] = React.useState(null); const [mediaRecorder, setMediaRecorder] = React.useState(null); const [uploadedCover, setUploadedCover] = React.useState(null); const [uploadedTemplate, setUploadedTemplate] = React.useState(null); const handleLogin = (e)=>{ e.preventDefault(); if (email) { setIsLoggedIn(true); const welcomeMessage = `Welcome, ${email}`; fetch(`/integrations/text-to-speech/speech?text=${encodeURIComponent(welcomeMessage)}`, { method: 'GET' }).then((response)=>{ if (response.ok) { return response.blob(); } throw new Error('Network response was not ok.'); }).then((audioBlob)=>{ const audioUrl = URL.createObjectURL(audioBlob); const audio = new Audio(audioUrl); audio.play(); }).catch((error)=>{ console.error('There was a problem with the text-to-speech request:', error); }); } }; const createNote = ()=>{ setIsSelectingTemplate(true); }; const saveNote = ()=>{ const newNote = { id: Date.now(), content: '', cover: uploadedCover || currentCover, template: uploadedTemplate || currentTemplate, drawings: [] }; setNotes([ ...notes, newNote ]); setIsCreatingNote(false); setIsSelectingTemplate(false); setUploadedCover(null); setUploadedTemplate(null); }; const createFolder = ()=>{ const newFolder = { id: Date.now(), name: `New Folder ${folders.length + 1}`, notes: [] }; setFolders([ ...folders, newFolder ]); }; const moveNoteToFolder = (noteId, folderId)=>{ const noteToMove = notes.find((note)=>note.id === noteId); if (noteToMove) { setNotes((prev)=>prev.filter((note)=>note.id !== noteId)); setFolders((prev)=>prev.map((folder)=>folder.id === folderId ? { ...folder, notes: [ ...folder.notes, noteToMove ] } : folder)); } }; const openNoteEditor = (note)=>{ setCurrentNote(note); setIsCreatingNote(true); window.open('/note-editor', '_blank'); }; const toggleRecording = ()=>{ if (isRecording) { stopRecording(); } else { startRecording(); } }; const startRecording = ()=>{ navigator.mediaDevices.getUserMedia({ audio: true }).then((stream)=>{ const recorder = new MediaRecorder(stream); setMediaRecorder(recorder); recorder.start(); setIsRecording(true); const audioChunks = []; recorder.addEventListener("dataavailable", (event)=>{ audioChunks.push(event.data); }); recorder.addEventListener("stop", ()=>{ const audioBlob = new Blob(audioChunks); const audioUrl = URL.createObjectURL(audioBlob); setAudioURL(audioUrl); }); }); }; const stopRecording = ()=>{ if (mediaRecorder) { mediaRecorder.stop(); setIsRecording(false); } }; const deleteRecording = ()=>{ setAudioURL(null); }; const handleCoverUpload = (event)=>{ const file = event.target.files[0]; if (file) { const reader = new FileReader(); reader.onload = (e)=>{ setUploadedCover(e.target.result); }; reader.readAsDataURL(file); } }; const handleTemplateUpload = (event)=>{ const file = event.target.files[0]; if (file) { const reader = new FileReader(); reader.onload = (e)=>{ setUploadedTemplate(e.target.result); }; reader.readAsDataURL(file); } }; const renderNoteEditor = ()=>{ if (!currentNote) return null; return /*#__PURE__*/ React.createElement("div", { className: "fixed inset-0 bg-white z-50 p-4", __source: { fileName: "", lineNumber: 152, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between mb-4", __source: { fileName: "", lineNumber: 153, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-bold", __source: { fileName: "", lineNumber: 154, columnNumber: 11 }, __self: this }, "Edit Note"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setCurrentNote(null), className: "text-red-500", __source: { fileName: "", lineNumber: 155, columnNumber: 11 }, __self: this }, "Close")), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 157, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: currentNote.cover.startsWith('data:') ? currentNote.cover : `/covers/${currentNote.cover}.jpg`, alt: "Note cover", className: "w-full h-40 object-cover mb-2", __source: { fileName: "", lineNumber: 158, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "bg-white border p-4", style: { backgroundImage: currentNote.template.startsWith('data:') ? `url(${currentNote.template})` : `url(/templates/${currentNote.template}.png)` }, __source: { fileName: "", lineNumber: 159, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("textarea", { className: "w-full h-64 p-2 bg-transparent", value: currentNote.content, onChange: (e)=>setCurrentNote({ ...currentNote, content: e.target.value }), __source: { fileName: "", lineNumber: 160, columnNumber: 13 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "flex space-x-2 mb-4", __source: { fileName: "", lineNumber: 167, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>setCurrentTool('pen'), className: `p-2 ${currentTool === 'pen' ? 'bg-blue-500 text-white' : 'bg-gray-200'}`, __source: { fileName: "", lineNumber: 168, columnNumber: 11 }, __self: this }, "Pen"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setCurrentTool('highlighter'), className: `p-2 ${currentTool === 'highlighter' ? 'bg-blue-500 text-white' : 'bg-gray-200'}`, __source: { fileName: "", lineNumber: 169, columnNumber: 11 }, __self: this }, "Highlighter"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setCurrentTool('eraser'), className: `p-2 ${currentTool === 'eraser' ? 'bg-blue-500 text-white' : 'bg-gray-200'}`, __source: { fileName: "", lineNumber: 170, columnNumber: 11 }, __self: this }, "Eraser")), /*#__PURE__*/ React.createElement("canvas", { id: "drawingCanvas", className: "border w-full h-64", __source: { fileName: "", lineNumber: 172, columnNumber: 9 }, __self: this })); }; if (!isLoggedIn) { return /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-center h-screen bg-gray-100", __source: { fileName: "", lineNumber: 179, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("form", { onSubmit: handleLogin, className: "bg-white p-8 rounded shadow-md", __source: { fileName: "", lineNumber: 180, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-bold mb-4", __source: { fileName: "", lineNumber: 181, columnNumber: 11 }, __self: this }, "Enter your email to start"), /*#__PURE__*/ React.createElement("input", { type: "email", name: "email", value: email, onChange: (e)=>setEmail(e.target.value), placeholder: "Enter your email", className: "w-full px-3 py-2 border rounded mb-4", required: true, __source: { fileName: "", lineNumber: 182, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "w-full bg-blue-500 text-white px-4 py-2 rounded", __source: { fileName: "", lineNumber: 191, columnNumber: 11 }, __self: this }, "Start App"))); } return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col h-screen bg-gray-100 p-4", __source: { fileName: "", lineNumber: 200, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between mb-4 flex-wrap", __source: { fileName: "", lineNumber: 201, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: createNote, className: "bg-blue-500 text-white px-4 py-2 rounded m-1", __source: { fileName: "", lineNumber: 202, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-plus mr-2", __source: { fileName: "", lineNumber: 203, columnNumber: 11 }, __self: this }), "New Note"), /*#__PURE__*/ React.createElement("button", { onClick: createFolder, className: "bg-green-500 text-white px-4 py-2 rounded m-1", __source: { fileName: "", lineNumber: 205, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-folder-plus mr-2", __source: { fileName: "", lineNumber: 206, columnNumber: 11 }, __self: this }), "New Folder"), /*#__PURE__*/ React.createElement("button", { onClick: toggleRecording, className: `${isRecording ? 'bg-red-500' : 'bg-green-500'} text-white px-4 py-2 rounded m-1`, __source: { fileName: "", lineNumber: 208, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: `fas ${isRecording ? 'fa-stop' : 'fa-microphone'} mr-2`, __source: { fileName: "", lineNumber: 209, columnNumber: 11 }, __self: this }), isRecording ? 'Stop Recording' : 'Start Recording')), audioURL && /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 215, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("audio", { controls: true, src: audioURL, className: "w-full", __source: { fileName: "", lineNumber: 216, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("button", { onClick: deleteRecording, className: "bg-red-500 text-white px-4 py-2 rounded mt-2", __source: { fileName: "", lineNumber: 217, columnNumber: 11 }, __self: this }, "Delete Recording")), isSelectingTemplate && /*#__PURE__*/ React.createElement("div", { className: "bg-white p-4 rounded shadow mb-4", __source: { fileName: "", lineNumber: 224, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "font-bold mb-2", __source: { fileName: "", lineNumber: 225, columnNumber: 11 }, __self: this }, "Select Cover and Template"), /*#__PURE__*/ React.createElement("div", { className: "flex flex-col md:flex-row mb-4", __source: { fileName: "", lineNumber: 226, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "md:w-1/2 mb-4 md:mb-0 md:mr-2", __source: { fileName: "", lineNumber: 227, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("select", { value: currentCover, onChange: (e)=>setCurrentCover(e.target.value), className: "border rounded w-full mb-2", __source: { fileName: "", lineNumber: 228, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "default", __source: { fileName: "", lineNumber: 229, columnNumber: 17 }, __self: this }, "Default Cover"), /*#__PURE__*/ React.createElement("option", { value: "nature", __source: { fileName: "", lineNumber: 230, columnNumber: 17 }, __self: this }, "Nature Cover"), /*#__PURE__*/ React.createElement("option", { value: "abstract", __source: { fileName: "", lineNumber: 231, columnNumber: 17 }, __self: this }, "Abstract Cover")), /*#__PURE__*/ React.createElement("input", { type: "file", onChange: handleCoverUpload, className: "w-full", __source: { fileName: "", lineNumber: 233, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "md:w-1/2 md:ml-2", __source: { fileName: "", lineNumber: 235, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("select", { value: currentTemplate, onChange: (e)=>setCurrentTemplate(e.target.value), className: "border rounded w-full mb-2", __source: { fileName: "", lineNumber: 236, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "blank", __source: { fileName: "", lineNumber: 237, columnNumber: 17 }, __self: this }, "Blank Template"), /*#__PURE__*/ React.createElement("option", { value: "lined", __source: { fileName: "", lineNumber: 238, columnNumber: 17 }, __self: this }, "Lined Template"), /*#__PURE__*/ React.createElement("option", { value: "grid", __source: { fileName: "", lineNumber: 239, columnNumber: 17 }, __self: this }, "Grid Template")), /*#__PURE__*/ React.createElement("input", { type: "file", onChange: handleTemplateUpload, className: "w-full", __source: { fileName: "", lineNumber: 241, columnNumber: 15 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "flex justify-between", __source: { fileName: "", lineNumber: 244, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>setIsSelectingTemplate(false), className: "bg-gray-500 text-white px-4 py-2 rounded", __source: { fileName: "", lineNumber: 245, columnNumber: 13 }, __self: this }, "Cancel"), /*#__PURE__*/ React.createElement("button", { onClick: saveNote, className: "bg-blue-500 text-white px-4 py-2 rounded", __source: { fileName: "", lineNumber: 248, columnNumber: 13 }, __self: this }, "Create Note"))), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4", __source: { fileName: "", lineNumber: 255, columnNumber: 7 }, __self: this }, folders.map((folder)=>/*#__PURE__*/ React.createElement("div", { key: folder.id, className: "bg-white p-4 rounded shadow", __source: { fileName: "", lineNumber: 257, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "font-bold mb-2", __source: { fileName: "", lineNumber: 258, columnNumber: 13 }, __self: this }, folder.name), /*#__PURE__*/ React.createElement("ul", { __source: { fileName: "", lineNumber: 259, columnNumber: 13 }, __self: this }, folder.notes.map((note)=>/*#__PURE__*/ React.createElement("li", { key: note.id, className: "mb-1", __source: { fileName: "", lineNumber: 261, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>openNoteEditor(note), className: "text-blue-500 hover:underline", __source: { fileName: "", lineNumber: 262, columnNumber: 19 }, __self: this }, note.content.substring(0, 20), "...")))))), notes.map((note)=>/*#__PURE__*/ React.createElement("div", { key: note.id, className: "bg-white p-4 rounded shadow", style: { backgroundImage: note.cover.startsWith('data:') ? `url(${note.cover})` : `url(/covers/${note.cover}.jpg)` }, __source: { fileName: "", lineNumber: 271, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "font-bold mb-2", __source: { fileName: "", lineNumber: 272, columnNumber: 13 }, __self: this }, "Note"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>openNoteEditor(note), className: "bg-blue-500 text-white px-2 py-1 rounded", __source: { fileName: "", lineNumber: 273, columnNumber: 13 }, __self: this }, "Open Note")))), currentNote && renderNoteEditor()); }