function MainComponent() { const [notes, setNotes] = React.useState([]); const [selectedNote, setSelectedNote] = React.useState({ title: "", content: "", id: null }); const [textStyle, setTextStyle] = React.useState({ fontSize: 16, bold: false, italic: false, underline: false }); const [nightMode, setNightMode] = React.useState(false); const addNote = ()=>{ const newNote = { title: "New Note", content: "", id: Date.now() }; setNotes([ ...notes, newNote ]); setSelectedNote(newNote); }; const selectNote = (note)=>{ setSelectedNote(note); }; const saveNote = (id, title, content)=>{ const updatedNotes = notes.map((note)=>note.id === id ? { ...note, title, content } : note); setNotes(updatedNotes); }; const handleTitleChange = (e)=>{ setSelectedNote({ ...selectedNote, title: e.target.value }); saveNote(selectedNote.id, e.target.value, selectedNote.content); }; const handleContentChange = (e)=>{ setSelectedNote({ ...selectedNote, content: e.target.value }); saveNote(selectedNote.id, selectedNote.title, e.target.value); }; const adjustFontSize = (sizeChange)=>{ setTextStyle((prevState)=>({ ...prevState, fontSize: prevState.fontSize + sizeChange })); }; const toggleStyle = (style)=>{ setTextStyle((prevState)=>({ ...prevState, [style]: !prevState[style] })); }; const toggleNightMode = ()=>{ setNightMode(!nightMode); }; const applyTextStyles = ()=>({ fontSize: `${textStyle.fontSize}px`, fontWeight: textStyle.bold ? 'bold' : 'normal', fontStyle: textStyle.italic ? 'italic' : 'normal', textDecoration: textStyle.underline ? 'underline' : 'none', color: nightMode ? 'white' : 'black', backgroundColor: nightMode ? '#333' : 'white' }); return /*#__PURE__*/ React.createElement("div", { className: `flex h-screen ${nightMode ? 'bg-[#333]' : 'bg-[#F0F0F0]'}`, __source: { fileName: "", lineNumber: 61, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: `w-[300px] ${nightMode ? 'bg-[#555]' : 'bg-white'} p-4 shadow-md`, __source: { fileName: "", lineNumber: 62, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "mb-4 p-2 bg-blue-500 text-white rounded", onClick: addNote, __source: { fileName: "", lineNumber: 63, columnNumber: 9 }, __self: this }, "New Note"), /*#__PURE__*/ React.createElement("div", { className: "overflow-y-scroll", style: { height: "calc(100vh - 56px)" }, __source: { fileName: "", lineNumber: 64, columnNumber: 9 }, __self: this }, notes.map((note)=>/*#__PURE__*/ React.createElement("div", { key: note.id, className: `p-2 ${nightMode ? 'hover:bg-[#777]' : 'hover:bg-gray-100'} cursor-pointer`, onClick: ()=>selectNote(note), __source: { fileName: "", lineNumber: 66, columnNumber: 13 }, __self: this }, note.title))), /*#__PURE__*/ React.createElement("button", { className: "mt-4 p-2 w-full bg-gray-800 text-white rounded", onClick: toggleNightMode, __source: { fileName: "", lineNumber: 71, columnNumber: 9 }, __self: this }, nightMode ? 'Day Mode' : 'Night Mode')), /*#__PURE__*/ React.createElement("div", { className: `flex-1 p-4 ${nightMode ? 'bg-[#222]' : 'bg-white'}`, __source: { fileName: "", lineNumber: 73, columnNumber: 7 }, __self: this }, selectedNote.id ? /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("div", { className: "mb-4 flex justify-between items-center", __source: { fileName: "", lineNumber: 76, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 77, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "px-2 py-1 text-xs font-semibold text-gray-600 border border-gray-300 rounded mr-2", onClick: ()=>adjustFontSize(-2), __source: { fileName: "", lineNumber: 78, columnNumber: 17 }, __self: this }, "A-"), /*#__PURE__*/ React.createElement("button", { className: "px-2 py-1 text-xs font-semibold text-gray-600 border border-gray-300 rounded", onClick: ()=>adjustFontSize(2), __source: { fileName: "", lineNumber: 79, columnNumber: 17 }, __self: this }, "A+")), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 81, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "mr-2", onClick: ()=>toggleStyle('bold'), __source: { fileName: "", lineNumber: 82, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fa fa-bold", __source: { fileName: "", lineNumber: 82, columnNumber: 78 }, __self: this })), /*#__PURE__*/ React.createElement("button", { className: "mr-2", onClick: ()=>toggleStyle('italic'), __source: { fileName: "", lineNumber: 83, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fa fa-italic", __source: { fileName: "", lineNumber: 83, columnNumber: 80 }, __self: this })), /*#__PURE__*/ React.createElement("button", { onClick: ()=>toggleStyle('underline'), __source: { fileName: "", lineNumber: 84, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fa fa-underline", __source: { fileName: "", lineNumber: 84, columnNumber: 66 }, __self: this })))), /*#__PURE__*/ React.createElement("input", { className: `w-full p-2 mb-4 text-xl font-roboto font-bold border-b-2 ${nightMode ? 'text-white bg-[#555] border-gray-600' : 'border-gray-300'}`, name: "title", value: selectedNote.title, onChange: handleTitleChange, __source: { fileName: "", lineNumber: 87, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("textarea", { className: `w-full h-[65vh] p-2 font-roboto ${nightMode ? 'text-white bg-[#555] border-gray-600' : 'border-2 border-gray-300'}`, name: "content", value: selectedNote.content, onChange: handleContentChange, style: applyTextStyles(), __source: { fileName: "", lineNumber: 93, columnNumber: 13 }, __self: this })) : /*#__PURE__*/ React.createElement("div", { className: `font-roboto ${nightMode ? 'text-white' : 'text-black'}`, __source: { fileName: "", lineNumber: 102, columnNumber: 11 }, __self: this }, "Select a note or create a new one."))); }