function WorkoutDatabaseManager({ onAddWorkout, buttonText }) { return /*#__PURE__*/ React.createElement("button", { type: "submit", className: "bg-blue-700 text-white p-2 rounded hover:bg-blue-800", onClick: onAddWorkout, __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, buttonText); } function WorkoutDatabaseManagerStory() { const handleAddWorkout = ()=>{ console.log("Saving data to the database..."); }; return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 15, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(WorkoutDatabaseManager, { onAddWorkout: handleAddWorkout, buttonText: "Add Workout", __source: { fileName: "", lineNumber: 16, columnNumber: 7 }, __self: this })); } function MainComponent() { const [workouts, setWorkouts] = React.useState([]); const [date, setDate] = React.useState(''); const [menu, setMenu] = React.useState(''); const [weight, setWeight] = React.useState(''); const [unit, setUnit] = React.useState('lb'); const [count, setCount] = React.useState(''); const [memo, setMemo] = React.useState(''); const handleAddWorkout = ()=>{ setWorkouts([ ...workouts, { date, menu, weight: parseInt(weight), unit, count: parseInt(count), memo } ]); setDate(''); setMenu(''); setWeight(''); setUnit('lb'); setCount(''); setMemo(''); }; const graphData = workouts.map((workout)=>({ date: workout.date, value: workout.weight * workout.count })); return /*#__PURE__*/ React.createElement("div", { className: "font-roboto", __source: { fileName: "", lineNumber: 23, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "space-y-6 bg-gradient-to-r from-indigo-500 via-purple-500 to-pink-500 p-6 rounded-lg shadow-xl text-white", __source: { fileName: "", lineNumber: 24, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-3xl text-center font-bold mb-4", __source: { fileName: "", lineNumber: 25, columnNumber: 9 }, __self: this }, "Workout Registration"), /*#__PURE__*/ React.createElement("form", { onSubmit: (e)=>e.preventDefault(), className: "space-y-4", __source: { fileName: "", lineNumber: 26, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4", __source: { fileName: "", lineNumber: 27, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "date", name: "date", value: date, onChange: (event)=>setDate(event.target.value), className: "border-2 border-gray-200 p-2 rounded", __source: { fileName: "", lineNumber: 28, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("select", { name: "menu", value: menu, onChange: (event)=>setMenu(event.target.value), className: "border-2 border-gray-200 p-2 rounded", __source: { fileName: "", lineNumber: 29, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "", __source: { fileName: "", lineNumber: 30, columnNumber: 15 }, __self: this }, "Select Workout"), /*#__PURE__*/ React.createElement("option", { value: "Squats", __source: { fileName: "", lineNumber: 31, columnNumber: 15 }, __self: this }, "Squats"), /*#__PURE__*/ React.createElement("option", { value: "Deadlifts", __source: { fileName: "", lineNumber: 32, columnNumber: 15 }, __self: this }, "Deadlifts"), /*#__PURE__*/ React.createElement("option", { value: "Bench Press", __source: { fileName: "", lineNumber: 33, columnNumber: 15 }, __self: this }, "Bench Press"), /*#__PURE__*/ React.createElement("option", { value: "Pull Ups", __source: { fileName: "", lineNumber: 34, columnNumber: 15 }, __self: this }, "Pull Ups"), /*#__PURE__*/ React.createElement("option", { value: "Push Ups", __source: { fileName: "", lineNumber: 35, columnNumber: 15 }, __self: this }, "Push Ups")), /*#__PURE__*/ React.createElement("div", { className: "flex items-center gap-2", __source: { fileName: "", lineNumber: 37, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "number", name: "weight", value: weight, min: "1", max: "999", onChange: (event)=>setWeight(event.target.value), className: "border-2 border-gray-200 p-2 rounded w-full", placeholder: "Weight", __source: { fileName: "", lineNumber: 38, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("select", { name: "unit", value: unit, onChange: (event)=>setUnit(event.target.value), className: "border-2 border-gray-200 p-2 rounded", __source: { fileName: "", lineNumber: 39, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "lb", __source: { fileName: "", lineNumber: 40, columnNumber: 17 }, __self: this }, "lb"), /*#__PURE__*/ React.createElement("option", { value: "kg", __source: { fileName: "", lineNumber: 41, columnNumber: 17 }, __self: this }, "kg"))), /*#__PURE__*/ React.createElement("input", { type: "number", name: "count", value: count, onChange: (event)=>setCount(event.target.value), className: "border-2 border-gray-200 p-2 rounded", placeholder: "Count", __source: { fileName: "", lineNumber: 44, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("textarea", { name: "memo", value: memo, onChange: (event)=>setMemo(event.target.value), placeholder: "Memo", className: "border-2 border-gray-200 p-2 rounded", __source: { fileName: "", lineNumber: 45, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement(WorkoutDatabaseManager, { onAddWorkout: handleAddWorkout, buttonText: "Add Workout", __source: { fileName: "", lineNumber: 47, columnNumber: 11 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "mt-8", __source: { fileName: "", lineNumber: 50, columnNumber: 7 }, __self: this }, workouts.length > 0 ? workouts.map((workout, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "bg-gray-100 p-4 rounded-lg mb-2 shadow-lg", __source: { fileName: "", lineNumber: 52, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "font-bold", __source: { fileName: "", lineNumber: 53, columnNumber: 13 }, __self: this }, "Date: ", /*#__PURE__*/ React.createElement("span", { className: "font-normal", __source: { fileName: "", lineNumber: 53, columnNumber: 44 }, __self: this }, workout.date)), /*#__PURE__*/ React.createElement("p", { className: "font-bold", __source: { fileName: "", lineNumber: 54, columnNumber: 13 }, __self: this }, "Workout: ", /*#__PURE__*/ React.createElement("span", { className: "font-normal", __source: { fileName: "", lineNumber: 54, columnNumber: 47 }, __self: this }, workout.menu)), /*#__PURE__*/ React.createElement("p", { className: "font-bold", __source: { fileName: "", lineNumber: 55, columnNumber: 13 }, __self: this }, "Weight: ", /*#__PURE__*/ React.createElement("span", { className: "font-normal", __source: { fileName: "", lineNumber: 55, columnNumber: 46 }, __self: this }, workout.weight, " ", workout.unit)), /*#__PURE__*/ React.createElement("p", { className: "font-bold", __source: { fileName: "", lineNumber: 56, columnNumber: 13 }, __self: this }, "Count: ", /*#__PURE__*/ React.createElement("span", { className: "font-normal", __source: { fileName: "", lineNumber: 56, columnNumber: 45 }, __self: this }, workout.count)), /*#__PURE__*/ React.createElement("p", { className: "font-bold", __source: { fileName: "", lineNumber: 57, columnNumber: 13 }, __self: this }, "Memo: ", /*#__PURE__*/ React.createElement("span", { className: "font-normal", __source: { fileName: "", lineNumber: 57, columnNumber: 44 }, __self: this }, workout.memo)))) : /*#__PURE__*/ React.createElement("div", { className: "text-center p-4 rounded-lg shadow-lg bg-gray-100", __source: { fileName: "", lineNumber: 59, columnNumber: 14 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-dumbbell", __source: { fileName: "", lineNumber: 59, columnNumber: 80 }, __self: this }), " No workout history 🏋️")), /*#__PURE__*/ React.createElement("div", { className: "mt-8", __source: { fileName: "", lineNumber: 61, columnNumber: 7 }, __self: this }, graphData.length > 0 ? /*#__PURE__*/ React.createElement("div", { className: "bg-gray-100 p-4 rounded-lg shadow-lg flex justify-center items-center", __source: { fileName: "", lineNumber: 63, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-center", __source: { fileName: "", lineNumber: 64, columnNumber: 13 }, __self: this }, "Graph placeholder 📊")) : /*#__PURE__*/ React.createElement("div", { className: "bg-gray-100 p-4 rounded-lg shadow-lg", __source: { fileName: "", lineNumber: 67, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-center", __source: { fileName: "", lineNumber: 68, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "far fa-chart-bar", __source: { fileName: "", lineNumber: 68, columnNumber: 40 }, __self: this }), " No data for graph 📊")))); }