function MainComponent() { const [workouts, setWorkouts] = React.useState([ { id: 1, type: 'Upper Body', sets: 0, reps: 0 }, { id: 2, type: 'Lower Body', sets: 0, reps: 0 }, { id: 3, type: 'Full Body', sets: 0, reps: 0 } ]); const handleInputChange = (event, id)=>{ const value = event.target.value; const name = event.target.name; const updatedWorkouts = workouts.map((workout)=>workout.id === id ? { ...workout, [name]: parseInt(value, 10) || 0 } : workout); setWorkouts(updatedWorkouts); }; const handleSubmit = (event)=>{ event.preventDefault(); // Log workout data here: console.log(workouts); alert(JSON.stringify(workouts, null, 2)); }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center p-4 bg-[#f7f7f7] h-screen", __source: { fileName: "", lineNumber: 21, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "font-bold text-3xl text-[#121212] mb-8 font-roboto", __source: { fileName: "", lineNumber: 22, columnNumber: 7 }, __self: this }, "Workout Log App"), /*#__PURE__*/ React.createElement("form", { className: "w-full max-w-6xl p-4 bg-white rounded-lg shadow-md", onSubmit: handleSubmit, __source: { fileName: "", lineNumber: 23, columnNumber: 7 }, __self: this }, workouts.map((workout)=>/*#__PURE__*/ React.createElement("div", { key: workout.id, className: "flex flex-col md:flex-row items-center justify-between mb-4", __source: { fileName: "", lineNumber: 25, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex-1", __source: { fileName: "", lineNumber: 26, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "font-semibold text-xl text-[#121212] mb-4 font-roboto", __source: { fileName: "", lineNumber: 27, columnNumber: 15 }, __self: this }, `${workout.type} Workout`)), /*#__PURE__*/ React.createElement("div", { className: "mb-4 md:mb-0 md:mr-4", __source: { fileName: "", lineNumber: 29, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: `sets-${workout.id}`, className: "block text-sm font-medium text-[#121212] font-roboto", __source: { fileName: "", lineNumber: 30, columnNumber: 15 }, __self: this }, "Sets"), /*#__PURE__*/ React.createElement("input", { type: "number", id: `sets-${workout.id}`, name: "sets", className: "mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50 font-roboto", placeholder: "0", value: workout.sets, onChange: (e)=>handleInputChange(e, workout.id), __source: { fileName: "", lineNumber: 33, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-4 md:mb-0 md:mr-4", __source: { fileName: "", lineNumber: 43, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: `reps-${workout.id}`, className: "block text-sm font-medium text-[#121212] font-roboto", __source: { fileName: "", lineNumber: 44, columnNumber: 15 }, __self: this }, "Reps"), /*#__PURE__*/ React.createElement("input", { type: "number", id: `reps-${workout.id}`, name: "reps", className: "mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50 font-roboto", placeholder: "0", value: workout.reps, onChange: (e)=>handleInputChange(e, workout.id), __source: { fileName: "", lineNumber: 47, columnNumber: 15 }, __self: this })))), /*#__PURE__*/ React.createElement("div", { className: "text-center", __source: { fileName: "", lineNumber: 59, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { type: "submit", className: "bg-[#4CAF50] text-white py-2 px-4 rounded-lg font-roboto", __source: { fileName: "", lineNumber: 60, columnNumber: 11 }, __self: this }, "Save Workout")))); }

Workout Log App

Upper Body Workout

Lower Body Workout

Full Body Workout