function MainComponent() { const [entries, setEntries] = React.useState([]); const [newEntry, setNewEntry] = React.useState([ "", "", "" ]); const [mood, setMood] = React.useState(""); const [reminder, setReminder] = React.useState(""); const updateNewEntry = (index, value)=>{ const updatedNewEntry = [ ...newEntry ]; updatedNewEntry[index] = value; setNewEntry(updatedNewEntry); }; const handleSaveEntry = ()=>{ setEntries([ ...entries, { entry: newEntry, mood } ]); setNewEntry([ "", "", "" ]); setMood(""); }; return /*#__PURE__*/ React.createElement("div", { className: "bg-[#E6E6FA] min-h-screen text-black flex flex-col items-center", __source: { fileName: "", lineNumber: 20, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("header", { className: "w-full py-4 px-8 flex items-center justify-between bg-[#D8BFD8] shadow-md", __source: { fileName: "", lineNumber: 21, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-3xl font-bold font-roboto", __source: { fileName: "", lineNumber: 22, columnNumber: 9 }, __self: this }, "Gratitude Journal"), /*#__PURE__*/ React.createElement("nav", { className: "flex space-x-4", __source: { fileName: "", lineNumber: 23, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "#", className: "text-base font-roboto", __source: { fileName: "", lineNumber: 24, columnNumber: 11 }, __self: this }, "Home"), /*#__PURE__*/ React.createElement("a", { href: "#", className: "text-base font-roboto", __source: { fileName: "", lineNumber: 25, columnNumber: 11 }, __self: this }, "Settings"))), /*#__PURE__*/ React.createElement("main", { className: "w-full p-8 flex flex-col items-center bg-[#F0FFF0]", __source: { fileName: "", lineNumber: 28, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-bold mb-4 font-roboto", __source: { fileName: "", lineNumber: 29, columnNumber: 9 }, __self: this }, "Today, I'm Grateful For..."), /*#__PURE__*/ React.createElement("input", { type: "text", name: "entry1", placeholder: "First thing", value: newEntry[0], onChange: (e)=>updateNewEntry(0, e.target.value), className: "mb-2 p-2 w-[300px] bg-white rounded-md shadow-sm", __source: { fileName: "", lineNumber: 30, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("input", { type: "text", name: "entry2", placeholder: "Second thing", value: newEntry[1], onChange: (e)=>updateNewEntry(1, e.target.value), className: "mb-2 p-2 w-[300px] bg-white rounded-md shadow-sm", __source: { fileName: "", lineNumber: 38, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("input", { type: "text", name: "entry3", placeholder: "Third thing", value: newEntry[2], onChange: (e)=>updateNewEntry(2, e.target.value), className: "mb-2 p-2 w-[300px] bg-white rounded-md shadow-sm", __source: { fileName: "", lineNumber: 46, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("textarea", { name: "mood", placeholder: "How do these things make you feel?", value: mood, onChange: (e)=>setMood(e.target.value), className: "mb-4 p-2 w-[300px] h-[100px] bg-white rounded-md shadow-sm", __source: { fileName: "", lineNumber: 54, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("button", { onClick: handleSaveEntry, className: "px-4 py-2 bg-green-600 text-white rounded-md font-bold shadow-md", __source: { fileName: "", lineNumber: 61, columnNumber: 9 }, __self: this }, "Save Entry"), /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-bold mt-8 mb-4 font-roboto", __source: { fileName: "", lineNumber: 64, columnNumber: 9 }, __self: this }, "Previous Entries"), /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-[600px] bg-[#FFF5EE] p-4 rounded-md", __source: { fileName: "", lineNumber: 65, columnNumber: 9 }, __self: this }, entries.map((entry, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "mb-4 p-4 bg-white rounded-md shadow-md", __source: { fileName: "", lineNumber: 67, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-2 font-bold", __source: { fileName: "", lineNumber: 68, columnNumber: 15 }, __self: this }, "- ", entry.entry[0]), /*#__PURE__*/ React.createElement("div", { className: "mb-2 font-bold", __source: { fileName: "", lineNumber: 69, columnNumber: 15 }, __self: this }, "- ", entry.entry[1]), /*#__PURE__*/ React.createElement("div", { className: "mb-2 font-bold", __source: { fileName: "", lineNumber: 70, columnNumber: 15 }, __self: this }, "- ", entry.entry[2]), /*#__PURE__*/ React.createElement("div", { className: "italic text-sm", __source: { fileName: "", lineNumber: 71, columnNumber: 15 }, __self: this }, "Feeling: ", entry.mood)))))); }