function MainComponent() { const notes = [ { id: 1, content: "Meeting notes with new client", lastModified: "Today" }, { id: 2, content: "Grocery list", lastModified: "Yesterday" }, { id: 3, content: "Book recommendations", lastModified: "1 week ago" } ]; const [activeNote, setActiveNote] = React.useState(notes[0]); const [editMode, setEditMode] = React.useState(false); const handleNoteClick = (note)=>{ setActiveNote(note); setEditMode(false); }; const handleEditClick = ()=>{ setEditMode(true); }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center w-full min-h-screen bg-[#f7f7f7] font-roboto", __source: { fileName: "", lineNumber: 17, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("header", { className: "w-full py-5 bg-[#ffffff] shadow", __source: { fileName: "", lineNumber: 18, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-5xl mx-auto px-4", __source: { fileName: "", lineNumber: 19, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-[#121212] text-3xl", __source: { fileName: "", lineNumber: 20, columnNumber: 11 }, __self: this }, "Note App"))), /*#__PURE__*/ React.createElement("div", { className: "flex flex-1 w-full max-w-5xl mx-auto px-4 py-6", __source: { fileName: "", lineNumber: 23, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-col w-1/4 mr-4", __source: { fileName: "", lineNumber: 24, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "mb-4 px-4 py-2 bg-[#00a2ff] text-white rounded hover:bg-[#008fde] transition-colors", __source: { fileName: "", lineNumber: 25, columnNumber: 11 }, __self: this }, "Add Note 📝"), /*#__PURE__*/ React.createElement("div", { className: "overflow-y-auto", __source: { fileName: "", lineNumber: 28, columnNumber: 11 }, __self: this }, notes.map((note)=>/*#__PURE__*/ React.createElement("div", { key: note.id, className: "px-4 py-2 bg-[#eaeaea] my-2 rounded hover:bg-[#d8d8d8] transition-colors cursor-pointer", onClick: ()=>handleNoteClick(note), __source: { fileName: "", lineNumber: 30, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "truncate", __source: { fileName: "", lineNumber: 31, columnNumber: 17 }, __self: this }, note.content), /*#__PURE__*/ React.createElement("div", { className: "text-xs text-[#767676]", __source: { fileName: "", lineNumber: 32, columnNumber: 17 }, __self: this }, note.lastModified))))), /*#__PURE__*/ React.createElement("div", { className: "flex-grow bg-white p-4 rounded shadow relative", __source: { fileName: "", lineNumber: 37, columnNumber: 9 }, __self: this }, editMode ? /*#__PURE__*/ React.createElement("textarea", { name: "note-content", rows: 10, className: "w-full p-2 border border-[#e5e5e5] rounded resize-none", defaultValue: activeNote.content, __source: { fileName: "", lineNumber: 39, columnNumber: 13 }, __self: this }) : /*#__PURE__*/ React.createElement("div", { className: "w-full p-2", __source: { fileName: "", lineNumber: 46, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 47, columnNumber: 15 }, __self: this }, activeNote.content), /*#__PURE__*/ React.createElement("button", { className: "absolute top-0 right-0 mt-4 mr-4 px-4 py-1 bg-[#00a2ff] text-white rounded hover:bg-[#008fde] transition-colors", onClick: handleEditClick, __source: { fileName: "", lineNumber: 48, columnNumber: 15 }, __self: this }, "Edit Note ✏️"))))); }