function MainComponent() { const [notes, setNotes] = React.useState([ { id: 1, title: 'Note 1', content: 'Content of Note 1' }, { id: 2, title: 'Note 2', content: 'Content of Note 2' }, { id: 3, title: 'Note 3', content: 'Content of Note 3' } ]); const [searchQuery, setSearchQuery] = React.useState(''); const [selectedNote, setSelectedNote] = React.useState(notes[0]); const handleNoteSelect = (note)=>{ setSelectedNote(note); }; const addNewNote = ()=>{ const newNoteId = notes.length + 1; const newNote = { id: newNoteId, title: `Note ${newNoteId}`, content: '' }; setNotes([ ...notes, newNote ]); setSelectedNote(newNote); }; const handleDeleteNote = (noteId)=>{ if (window.confirm('Are you sure you want to delete this note?')) { const newNotes = notes.filter((note)=>note.id !== noteId); setNotes(newNotes); if (selectedNote.id === noteId) { setSelectedNote(newNotes[0] || null); } } }; const filteredNotes = notes.filter((note)=>note.title.toLowerCase().includes(searchQuery.toLowerCase()) || note.content.toLowerCase().includes(searchQuery.toLowerCase())); return /*#__PURE__*/ React.createElement("div", { className: "flex", __source: { fileName: "", lineNumber: 36, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("aside", { className: "w-[300px] h-screen p-4 bg-[#f5f5f5]", __source: { fileName: "", lineNumber: 37, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center", __source: { fileName: "", lineNumber: 38, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "search", placeholder: "Search notes...", className: "w-full p-2 text-[#333] bg-white border border-[#ddd] rounded-l-md font-roboto", value: searchQuery, onChange: (e)=>setSearchQuery(e.target.value), __source: { fileName: "", lineNumber: 39, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("button", { className: "p-2 bg-[#007BFF] text-white rounded-r-md", onClick: addNewNote, __source: { fileName: "", lineNumber: 47, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fa fa-plus", __source: { fileName: "", lineNumber: 51, columnNumber: 13 }, __self: this }))), /*#__PURE__*/ React.createElement("ul", { className: "overflow-y-auto mt-4", __source: { fileName: "", lineNumber: 54, columnNumber: 9 }, __self: this }, filteredNotes.map((note)=>/*#__PURE__*/ React.createElement("li", { key: note.id, className: "flex justify-between items-center p-2 hover:bg-[#e0e0e0] font-roboto cursor-pointer", onClick: ()=>handleNoteSelect(note), __source: { fileName: "", lineNumber: 56, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 61, columnNumber: 15 }, __self: this }, note.title), /*#__PURE__*/ React.createElement("button", { className: "text-red-500", onClick: (e)=>{ e.stopPropagation(); handleDeleteNote(note.id); }, __source: { fileName: "", lineNumber: 62, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fa fa-trash", __source: { fileName: "", lineNumber: 69, columnNumber: 17 }, __self: this })))))), /*#__PURE__*/ React.createElement("section", { className: "flex-1 h-screen bg-white p-4", __source: { fileName: "", lineNumber: 75, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-col", __source: { fileName: "", lineNumber: 76, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", className: "text-2xl p-2 border-b border-[#ddd] font-roboto", value: selectedNote?.title, onChange: (e)=>{ const updatedNote = { ...selectedNote, title: e.target.value }; setSelectedNote(updatedNote); setNotes(notes.map((note)=>note.id === updatedNote.id ? updatedNote : note)); }, __source: { fileName: "", lineNumber: 77, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("textarea", { className: "mt-4 p-2 text-[#666] w-full h-[90%] border border-[#ddd] font-roboto", value: selectedNote?.content, onChange: (e)=>{ const updatedNote = { ...selectedNote, content: e.target.value }; setSelectedNote(updatedNote); setNotes(notes.map((note)=>note.id === updatedNote.id ? updatedNote : note)); }, __source: { fileName: "", lineNumber: 87, columnNumber: 11 }, __self: this })))); }