function MainComponent() { const [workout, setWorkout] = React.useState({ workoutName: '', duration: '', notes: '' }); const handleChange = (e)=>{ const { name, value } = e.target; setWorkout((prevState)=>({ ...prevState, [name]: value })); }; const handleSubmit = (e)=>{ e.preventDefault(); console.log(workout); setWorkout({ workoutName: '', duration: '', notes: '' }); }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center min-h-screen bg-[#f7f7f7] p-4", __source: { fileName: "", lineNumber: 27, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-bold font-roboto text-[#121212] mb-6", __source: { fileName: "", lineNumber: 28, columnNumber: 7 }, __self: this }, "Workout Tracker"), /*#__PURE__*/ React.createElement("form", { className: "flex flex-col gap-4", onSubmit: handleSubmit, __source: { fileName: "", lineNumber: 29, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 30, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "workoutName", className: "block font-roboto text-md mb-2 text-[#121212]", __source: { fileName: "", lineNumber: 31, columnNumber: 11 }, __self: this }, "Workout Name"), /*#__PURE__*/ React.createElement("input", { type: "text", id: "workoutName", name: "workoutName", className: "w-full p-2 border border-[#ddd] rounded-md", placeholder: "E.g., Cardio, Strength", value: workout.workoutName, onChange: handleChange, __source: { fileName: "", lineNumber: 32, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 34, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "duration", className: "block font-roboto text-md mb-2 text-[#121212]", __source: { fileName: "", lineNumber: 35, columnNumber: 11 }, __self: this }, "Duration (in minutes)"), /*#__PURE__*/ React.createElement("input", { type: "number", id: "duration", name: "duration", className: "w-full p-2 border border-[#ddd] rounded-md", placeholder: "30", value: workout.duration, onChange: handleChange, __source: { fileName: "", lineNumber: 36, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 38, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "notes", className: "block font-roboto text-md mb-2 text-[#121212]", __source: { fileName: "", lineNumber: 39, columnNumber: 11 }, __self: this }, "Notes"), /*#__PURE__*/ React.createElement("textarea", { id: "notes", name: "notes", rows: "4", className: "w-full p-2 border border-[#ddd] rounded-md", placeholder: "How did it go?", value: workout.notes, onChange: handleChange, __source: { fileName: "", lineNumber: 40, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "w-full p-3 bg-[#4CAF50] text-white font-roboto rounded-md hover:bg-[#45A049]", __source: { fileName: "", lineNumber: 42, columnNumber: 9 }, __self: this }, "Record Workout"))); }