function MainComponent() { const [milestones, setMilestones] = React.useState([]); const [formState, setFormState] = React.useState({ age: "", milestone: "", description: "", media: null }); const handleChange = (e)=>{ const { name, value, files } = e.target; if (name === "media") { setFormState((prevState)=>({ ...prevState, [name]: files[0] })); } else { setFormState((prevState)=>({ ...prevState, [name]: value })); } }; const handleSubmit = (e)=>{ e.preventDefault(); setMilestones((prevMilestones)=>[ ...prevMilestones, { ...formState, id: Date.now() } ]); setFormState({ age: "", milestone: "", description: "", media: null }); }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center p-6 bg-gray-100", __source: { fileName: "", lineNumber: 40, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-4xl font-bold py-4 font-roboto", __source: { fileName: "", lineNumber: 41, columnNumber: 7 }, __self: this }, "Life Milestones Tracker"), /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-3xl bg-white p-6 rounded-lg shadow-md", __source: { fileName: "", lineNumber: 42, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-semibold font-crimson-text", __source: { fileName: "", lineNumber: 43, columnNumber: 9 }, __self: this }, "Add a New Milestone"), /*#__PURE__*/ React.createElement("form", { onSubmit: handleSubmit, __source: { fileName: "", lineNumber: 44, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 45, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-medium text-gray-700 font-crimson-text", htmlFor: "age", __source: { fileName: "", lineNumber: 46, columnNumber: 13 }, __self: this }, "Age"), /*#__PURE__*/ React.createElement("input", { type: "number", id: "age", name: "age", value: formState.age, onChange: handleChange, className: "mt-1 p-2 block w-full border border-gray-300 rounded-md", __source: { fileName: "", lineNumber: 47, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 49, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-medium text-gray-700 font-crimson-text", htmlFor: "milestone", __source: { fileName: "", lineNumber: 50, columnNumber: 13 }, __self: this }, "Milestone"), /*#__PURE__*/ React.createElement("input", { type: "text", id: "milestone", name: "milestone", value: formState.milestone, onChange: handleChange, className: "mt-1 p-2 block w-full border border-gray-300 rounded-md", __source: { fileName: "", lineNumber: 51, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 53, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-medium text-gray-700 font-crimson-text", htmlFor: "description", __source: { fileName: "", lineNumber: 54, columnNumber: 13 }, __self: this }, "Description"), /*#__PURE__*/ React.createElement("textarea", { id: "description", name: "description", value: formState.description, onChange: handleChange, className: "mt-1 p-2 block w-full border border-gray-300 rounded-md", __source: { fileName: "", lineNumber: 55, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 57, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-medium text-gray-700 font-crimson-text", htmlFor: "media", __source: { fileName: "", lineNumber: 58, columnNumber: 13 }, __self: this }, "Upload Photo/Video"), /*#__PURE__*/ React.createElement("input", { type: "file", id: "media", name: "media", onChange: handleChange, className: "mt-1 block w-full text-sm text-gray-500 file:mr-4 file:py-2 file:px-4 file:border-0 file:text-sm file:font-semibold file:bg-blue-50 file:text-blue-700 hover:file:bg-blue-100", __source: { fileName: "", lineNumber: 59, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "w-full py-2 px-4 bg-blue-500 text-white font-semibold rounded-md hover:bg-blue-700", __source: { fileName: "", lineNumber: 61, columnNumber: 11 }, __self: this }, "Add Milestone"))), /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-3xl mt-6 bg-white p-6 rounded-lg shadow-md", __source: { fileName: "", lineNumber: 64, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-semibold font-crimson-text", __source: { fileName: "", lineNumber: 65, columnNumber: 9 }, __self: this }, "Timeline"), /*#__PURE__*/ React.createElement("ul", { className: "divide-y divide-gray-200", __source: { fileName: "", lineNumber: 66, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("li", { className: "py-4 flex", __source: { fileName: "", lineNumber: 67, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "ml-3", __source: { fileName: "", lineNumber: 68, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-sm font-medium text-gray-900 font-crimson-text", __source: { fileName: "", lineNumber: 69, columnNumber: 15 }, __self: this }, "Birth"), /*#__PURE__*/ React.createElement("p", { className: "text-sm text-gray-500 font-crimson-text", __source: { fileName: "", lineNumber: 70, columnNumber: 15 }, __self: this }, "Welcome to the world!"))), milestones.map(({ id, age, milestone, description, media })=>/*#__PURE__*/ React.createElement("li", { key: id, className: "py-4 flex", __source: { fileName: "", lineNumber: 74, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "ml-3", __source: { fileName: "", lineNumber: 75, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-sm font-medium text-gray-900 font-crimson-text", __source: { fileName: "", lineNumber: 76, columnNumber: 17 }, __self: this }, age, " Years - ", milestone), /*#__PURE__*/ React.createElement("p", { className: "text-sm text-gray-500 font-crimson-text", __source: { fileName: "", lineNumber: 77, columnNumber: 17 }, __self: this }, description), media && /*#__PURE__*/ React.createElement("div", { className: "mt-2", __source: { fileName: "", lineNumber: 79, columnNumber: 19 }, __self: this }, media.type.startsWith("image/") ? /*#__PURE__*/ React.createElement("img", { src: URL.createObjectURL(media), alt: `media for ${milestone}`, className: "w-[200px] h-[200px] object-cover", __source: { fileName: "", lineNumber: 81, columnNumber: 23 }, __self: this }) : /*#__PURE__*/ React.createElement("video", { controls: true, className: "w-[200px] h-[200px]", __source: { fileName: "", lineNumber: 83, columnNumber: 23 }, __self: this }, /*#__PURE__*/ React.createElement("source", { src: URL.createObjectURL(media), type: media.type, __source: { fileName: "", lineNumber: 84, columnNumber: 25 }, __self: this }))))))))); }