function MainComponent() { const [mealLog, setMealLog] = React.useState([]); const [exerciseLog, setExerciseLog] = React.useState([]); const handleDietSubmit = (event)=>{ event.preventDefault(); const { food, calories } = event.target.elements; setMealLog([ ...mealLog, { food: food.value, calories: calories.value } ]); }; const handleExerciseSubmit = (event)=>{ event.preventDefault(); const { activity, duration } = event.target.elements; setExerciseLog([ ...exerciseLog, { activity: activity.value, duration: duration.value } ]); }; const totalCaloriesBurned = exerciseLog.reduce((total, log)=>total + log.duration / 60 * 100, 0); return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-[#f0f2f5] p-6", __source: { fileName: "", lineNumber: 16, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-4xl mx-auto", __source: { fileName: "", lineNumber: 17, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("header", { className: "text-center mb-10", __source: { fileName: "", lineNumber: 18, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-4xl font-bold font-roboto text-[#121212]", __source: { fileName: "", lineNumber: 19, columnNumber: 11 }, __self: this }, "Health Tracker")), /*#__PURE__*/ React.createElement("section", { __source: { fileName: "", lineNumber: 21, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-6", __source: { fileName: "", lineNumber: 22, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white p-6 rounded-lg shadow-md", __source: { fileName: "", lineNumber: 23, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-semibold font-roboto text-[#121212] mb-4", __source: { fileName: "", lineNumber: 24, columnNumber: 15 }, __self: this }, "Diet Log"), /*#__PURE__*/ React.createElement("form", { onSubmit: handleDietSubmit, __source: { fileName: "", lineNumber: 25, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-6", __source: { fileName: "", lineNumber: 26, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "food", className: "block font-roboto text-[#121212] mb-2", __source: { fileName: "", lineNumber: 27, columnNumber: 19 }, __self: this }, "Food Item"), /*#__PURE__*/ React.createElement("input", { type: "text", name: "food", id: "food", placeholder: "What did you eat today?", className: "w-full p-4 border border-gray-300 rounded-lg font-roboto", required: true, __source: { fileName: "", lineNumber: 28, columnNumber: 19 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-6", __source: { fileName: "", lineNumber: 30, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "calories", className: "block font-roboto text-[#121212] mb-2", __source: { fileName: "", lineNumber: 31, columnNumber: 19 }, __self: this }, "Calories"), /*#__PURE__*/ React.createElement("input", { type: "number", name: "calories", id: "calories", placeholder: "Calorie count", className: "w-full p-4 border border-gray-300 rounded-lg font-roboto", required: true, __source: { fileName: "", lineNumber: 32, columnNumber: 19 }, __self: this })), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "w-full bg-[#4caf50] text-white p-4 rounded-lg font-roboto hover:bg-[#43a047]", __source: { fileName: "", lineNumber: 34, columnNumber: 17 }, __self: this }, "Add to Log"))), /*#__PURE__*/ React.createElement("div", { className: "bg-white p-6 rounded-lg shadow-md", __source: { fileName: "", lineNumber: 37, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-semibold font-roboto text-[#121212] mb-4", __source: { fileName: "", lineNumber: 38, columnNumber: 15 }, __self: this }, "Exercise Log"), /*#__PURE__*/ React.createElement("form", { onSubmit: handleExerciseSubmit, __source: { fileName: "", lineNumber: 39, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-6", __source: { fileName: "", lineNumber: 40, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "activity", className: "block font-roboto text-[#121212] mb-2", __source: { fileName: "", lineNumber: 41, columnNumber: 19 }, __self: this }, "Activity"), /*#__PURE__*/ React.createElement("input", { type: "text", name: "activity", id: "activity", placeholder: "What did you do today?", className: "w-full p-4 border border-gray-300 rounded-lg font-roboto", required: true, __source: { fileName: "", lineNumber: 42, columnNumber: 19 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-6", __source: { fileName: "", lineNumber: 44, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "duration", className: "block font-roboto text-[#121212] mb-2", __source: { fileName: "", lineNumber: 45, columnNumber: 19 }, __self: this }, "Duration (Minutes)"), /*#__PURE__*/ React.createElement("input", { type: "number", name: "duration", id: "duration", placeholder: "Duration in minutes", className: "w-full p-4 border border-gray-300 rounded-lg font-roboto", required: true, __source: { fileName: "", lineNumber: 46, columnNumber: 19 }, __self: this })), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "w-full bg-[#2196f3] text-white p-4 rounded-lg font-roboto hover:bg-[#1e88e5]", __source: { fileName: "", lineNumber: 48, columnNumber: 17 }, __self: this }, "Add to Log"))))), /*#__PURE__*/ React.createElement("section", { className: "mt-10", __source: { fileName: "", lineNumber: 53, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-semibold font-roboto text-[#121212] text-center mb-6", __source: { fileName: "", lineNumber: 54, columnNumber: 11 }, __self: this }, "Your Progress"), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-3 gap-4", __source: { fileName: "", lineNumber: 55, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white p-4 rounded-lg shadow-md text-center", __source: { fileName: "", lineNumber: 56, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-5xl font-roboto text-[#4caf50]", __source: { fileName: "", lineNumber: 57, columnNumber: 15 }, __self: this }, "🥗"), /*#__PURE__*/ React.createElement("h3", { className: "text-xl font-semibold font-roboto text-[#121212] mt-2", __source: { fileName: "", lineNumber: 58, columnNumber: 15 }, __self: this }, "Meals Logged"), /*#__PURE__*/ React.createElement("p", { className: "font-roboto text-[#121212]", __source: { fileName: "", lineNumber: 59, columnNumber: 15 }, __self: this }, mealLog.length)), /*#__PURE__*/ React.createElement("div", { className: "bg-white p-4 rounded-lg shadow-md text-center", __source: { fileName: "", lineNumber: 61, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-5xl font-roboto text-[#2196f3]", __source: { fileName: "", lineNumber: 62, columnNumber: 15 }, __self: this }, "🏃"), /*#__PURE__*/ React.createElement("h3", { className: "text-xl font-semibold font-roboto text-[#121212] mt-2", __source: { fileName: "", lineNumber: 63, columnNumber: 15 }, __self: this }, "Exercises Logged"), /*#__PURE__*/ React.createElement("p", { className: "font-roboto text-[#121212]", __source: { fileName: "", lineNumber: 64, columnNumber: 15 }, __self: this }, exerciseLog.length)), /*#__PURE__*/ React.createElement("div", { className: "bg-white p-4 rounded-lg shadow-md text-center", __source: { fileName: "", lineNumber: 66, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-5xl font-roboto text-[#f44336]", __source: { fileName: "", lineNumber: 67, columnNumber: 15 }, __self: this }, "🔥"), /*#__PURE__*/ React.createElement("h3", { className: "text-xl font-semibold font-roboto text-[#121212] mt-2", __source: { fileName: "", lineNumber: 68, columnNumber: 15 }, __self: this }, "Calories Burned"), /*#__PURE__*/ React.createElement("p", { className: "font-roboto text-[#121212]", __source: { fileName: "", lineNumber: 69, columnNumber: 15 }, __self: this }, totalCaloriesBurned.toFixed(2))))))); }