function MainComponent() { const [entries, setEntries] = React.useState([]); const [selectedEntry, setSelectedEntry] = React.useState(null); const [newEntry, setNewEntry] = React.useState({ title: '', content: '' }); const handleChange = (e)=>{ const { name, value } = e.target; setNewEntry((prevEntry)=>({ ...prevEntry, [name]: value })); }; const handleEntrySelect = (entry)=>{ setSelectedEntry(entry); }; const handleNewEntry = (e)=>{ e.preventDefault(); setEntries([ ...entries, newEntry ]); setNewEntry({ title: '', content: '' }); }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center min-h-screen bg-[#f5d8e4] p-4", __source: { fileName: "", lineNumber: 25, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-4xl font-bold text-[#967bb6] mb-8", __source: { fileName: "", lineNumber: 26, columnNumber: 13 }, __self: this }, "Dream Journal"), /*#__PURE__*/ React.createElement("form", { className: "w-full max-w-md mb-8", onSubmit: handleNewEntry, __source: { fileName: "", lineNumber: 27, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("input", { className: "w-full border-2 border-[#967bb6] p-2 rounded mb-4", type: "text", name: "title", placeholder: "Dream Title", value: newEntry.title, onChange: handleChange, __source: { fileName: "", lineNumber: 28, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("textarea", { className: "w-full border-2 border-[#967bb6] p-2 rounded mb-4", name: "content", placeholder: "Dream Content", rows: "4", value: newEntry.content, onChange: handleChange, __source: { fileName: "", lineNumber: 36, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "w-full bg-[#967bb6] text-white p-2 rounded hover:bg-[#8470a0]", __source: { fileName: "", lineNumber: 44, columnNumber: 17 }, __self: this }, "Add Entry")), /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-4xl grid grid-cols-1 md:grid-cols-3 gap-6 mb-8", __source: { fileName: "", lineNumber: 46, columnNumber: 13 }, __self: this }, entries.map((entry, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "border-2 border-[#967bb6] p-4 rounded hover:bg-[#e9d5ea]", onClick: ()=>handleEntrySelect(entry), __source: { fileName: "", lineNumber: 48, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-2xl font-semibold text-[#967bb6] mb-2", __source: { fileName: "", lineNumber: 49, columnNumber: 25 }, __self: this }, entry.title), /*#__PURE__*/ React.createElement("p", { className: "text-md text-[#967bb6]", __source: { fileName: "", lineNumber: 50, columnNumber: 25 }, __self: this }, entry.content.substring(0, 100), "...")))), selectedEntry && /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-md", __source: { fileName: "", lineNumber: 55, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-semibold text-[#967bb6] mb-4", __source: { fileName: "", lineNumber: 56, columnNumber: 21 }, __self: this }, selectedEntry.title), /*#__PURE__*/ React.createElement("p", { className: "text-md text-[#967bb6]", __source: { fileName: "", lineNumber: 57, columnNumber: 21 }, __self: this }, selectedEntry.content))); }