function MainComponent() { const [records, setRecords] = React.useState([]); const [record, setRecord] = React.useState(""); const handleAddRecord = ()=>{ if (record.trim()) { setRecords((prevRecords)=>[ ...prevRecords, { id: prevRecords.length + 1, text: record, timestamp: new Date().toLocaleString() } ].sort((a, b)=>new Date(b.timestamp) - new Date(a.timestamp))); setRecord(""); } }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col gap-4 p-4 items-center justify-center min-h-screen bg-[#f0f2f5]", __source: { fileName: "", lineNumber: 13, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-[500px] rounded-lg shadow-lg bg-white p-6", __source: { fileName: "", lineNumber: 14, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "font-roboto text-[#121212] mb-4", __source: { fileName: "", lineNumber: 15, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-lg font-semibold", __source: { fileName: "", lineNumber: 16, columnNumber: 11 }, __self: this }, "Child's Growth Chronicles"), /*#__PURE__*/ React.createElement("p", { className: "text-sm", __source: { fileName: "", lineNumber: 17, columnNumber: 11 }, __self: this }, "Document the significant growth milestones of your child.")), /*#__PURE__*/ React.createElement("div", { className: "flex flex-col gap-2 mb-4", __source: { fileName: "", lineNumber: 19, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("textarea", { className: "border border-gray-300 p-2 rounded-lg resize-none", rows: "4", placeholder: "Enter the growth milestone...", name: "growthRecordInput", value: record, onChange: (e)=>setRecord(e.target.value), __source: { fileName: "", lineNumber: 20, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("button", { className: "bg-[#4f46e5] hover:bg-[#4338ca] text-white font-medium py-2 rounded-lg", onClick: handleAddRecord, __source: { fileName: "", lineNumber: 28, columnNumber: 11 }, __self: this }, "Save Milestone"))), /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-[500px] rounded-lg shadow-lg bg-white p-6", __source: { fileName: "", lineNumber: 36, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "font-roboto text-[#121212] text-lg font-semibold mb-2", __source: { fileName: "", lineNumber: 37, columnNumber: 9 }, __self: this }, "Milestone Timeline"), /*#__PURE__*/ React.createElement("div", { className: "flex flex-col gap-2", __source: { fileName: "", lineNumber: 38, columnNumber: 9 }, __self: this }, records.map((record)=>/*#__PURE__*/ React.createElement("div", { key: record.id, className: "border border-gray-300 p-2 rounded-lg", __source: { fileName: "", lineNumber: 40, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "font-roboto text-sm", __source: { fileName: "", lineNumber: 41, columnNumber: 15 }, __self: this }, record.text), /*#__PURE__*/ React.createElement("p", { className: "font-roboto text-xs text-gray-500", __source: { fileName: "", lineNumber: 42, columnNumber: 15 }, __self: this }, record.timestamp)))))); }