function MainComponent() { const [activities, setActivities] = React.useState([]); const handleSubmit = (event)=>{ event.preventDefault(); const { activity_name, activity_date, activity_details } = event.target.elements; const newActivity = { id: Date.now(), name: activity_name.value, date: activity_date.value, details: activity_details.value }; setActivities([ ...activities, newActivity ]); event.target.reset(); }; const pastActivitiesList = activities.map((activity)=>/*#__PURE__*/ React.createElement("li", { key: activity.id, className: "mb-3 p-4 bg-[#f8f9fa] rounded-md fade-in", __source: { fileName: "", lineNumber: 16, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-center", __source: { fileName: "", lineNumber: 17, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-lg font-medium", __source: { fileName: "", lineNumber: 18, columnNumber: 9 }, __self: this }, activity.name), /*#__PURE__*/ React.createElement("span", { className: "text-sm text-[#6c757d]", __source: { fileName: "", lineNumber: 19, columnNumber: 9 }, __self: this }, activity.date)), /*#__PURE__*/ React.createElement("p", { className: "text-sm text-[#121212] mt-2", __source: { fileName: "", lineNumber: 21, columnNumber: 7 }, __self: this }, activity.details))); return /*#__PURE__*/ React.createElement("div", { className: "font-roboto flex flex-col items-center p-4", __source: { fileName: "", lineNumber: 25, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-semibold text-[#121212] mb-6", __source: { fileName: "", lineNumber: 26, columnNumber: 7 }, __self: this }, "Dog Training & Competition Diary"), /*#__PURE__*/ React.createElement("form", { className: "w-full max-w-lg mb-8", onSubmit: handleSubmit, __source: { fileName: "", lineNumber: 27, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 28, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "activity-name", className: "block text-lg font-medium text-[#121212] mb-2", __source: { fileName: "", lineNumber: 29, columnNumber: 11 }, __self: this }, "Activity Name"), /*#__PURE__*/ React.createElement("input", { type: "text", id: "activity-name", name: "activity_name", className: "w-full p-2 border border-[#ccc] rounded-md", placeholder: "Enter activity name", required: true, __source: { fileName: "", lineNumber: 30, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 32, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "activity-date", className: "block text-lg font-medium text-[#121212] mb-2", __source: { fileName: "", lineNumber: 33, columnNumber: 11 }, __self: this }, "Date"), /*#__PURE__*/ React.createElement("input", { type: "date", id: "activity-date", name: "activity_date", className: "w-full p-2 border border-[#ccc] rounded-md", required: true, __source: { fileName: "", lineNumber: 34, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 36, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "activity-details", className: "block text-lg font-medium text-[#121212] mb-2", __source: { fileName: "", lineNumber: 37, columnNumber: 11 }, __self: this }, "Details"), /*#__PURE__*/ React.createElement("textarea", { id: "activity-details", name: "activity_details", className: "w-full p-2 border border-[#ccc] rounded-md", placeholder: "Enter details about the activity", required: true, __source: { fileName: "", lineNumber: 38, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "w-full bg-[#007bff] text-white font-semibold py-2 px-4 rounded-md hover:bg-[#0056b3]", __source: { fileName: "", lineNumber: 40, columnNumber: 9 }, __self: this }, "Add Activity")), /*#__PURE__*/ React.createElement("div", { className: "w-full lg:w-3/4", __source: { fileName: "", lineNumber: 42, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-semibold text-[#121212] mb-4", __source: { fileName: "", lineNumber: 43, columnNumber: 9 }, __self: this }, "Past Activities"), /*#__PURE__*/ React.createElement("ul", { className: "w-full", __source: { fileName: "", lineNumber: 44, columnNumber: 9 }, __self: this }, pastActivitiesList.length > 0 ? pastActivitiesList : /*#__PURE__*/ React.createElement("p", { className: "text-center text-sm text-[#6c757d]", __source: { fileName: "", lineNumber: 45, columnNumber: 65 }, __self: this }, "No past activities to show."))), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 48, columnNumber: 7 }, __self: this }, ` @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } .fade-in { animation: fadeIn 1s ease-in-out; } `)); }