function LoginAndRegisterButton({ onSubmit, heightLabel, weightLabel, healthConditionsLabel, dietPreferenceLabel, buttonText }) { return /*#__PURE__*/ React.createElement("form", { className: "space-y-4", onSubmit: onSubmit, __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 4, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "height", className: "block text-left", __source: { fileName: "", lineNumber: 5, columnNumber: 9 }, __self: this }, heightLabel), /*#__PURE__*/ React.createElement("input", { type: "number", id: "height", name: "height", className: "w-full p-2 border rounded", __source: { fileName: "", lineNumber: 6, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 8, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "weight", className: "block text-left", __source: { fileName: "", lineNumber: 9, columnNumber: 9 }, __self: this }, weightLabel), /*#__PURE__*/ React.createElement("input", { type: "number", id: "weight", name: "weight", className: "w-full p-2 border rounded", __source: { fileName: "", lineNumber: 10, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 12, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "health-conditions", className: "block text-left", __source: { fileName: "", lineNumber: 13, columnNumber: 9 }, __self: this }, healthConditionsLabel), /*#__PURE__*/ React.createElement("input", { type: "text", id: "health-conditions", name: "healthConditions", className: "w-full p-2 border rounded", placeholder: "e.g., diabetes, asthma", __source: { fileName: "", lineNumber: 14, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 16, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "diet-preference", className: "block text-left", __source: { fileName: "", lineNumber: 17, columnNumber: 9 }, __self: this }, dietPreferenceLabel), /*#__PURE__*/ React.createElement("select", { id: "diet-preference", name: "dietPreference", className: "w-full p-2 border rounded", __source: { fileName: "", lineNumber: 18, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "vegetarian", __source: { fileName: "", lineNumber: 19, columnNumber: 11 }, __self: this }, "Vegetarian"), /*#__PURE__*/ React.createElement("option", { value: "non-vegetarian", __source: { fileName: "", lineNumber: 20, columnNumber: 11 }, __self: this }, "Non-Vegetarian"))), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "w-full bg-blue-600 text-white p-2 rounded", __source: { fileName: "", lineNumber: 23, columnNumber: 7 }, __self: this }, buttonText)); } function LoginAndRegisterButtonStory() { const handleFormSubmit = (event)=>{ event.preventDefault(); console.log("Form submitted"); }; return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 35, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(LoginAndRegisterButton, { onSubmit: handleFormSubmit, heightLabel: "Height (cm)", weightLabel: "Weight (kg)", healthConditionsLabel: "Health Conditions", dietPreferenceLabel: "Dietary Preference", buttonText: "Submit", __source: { fileName: "", lineNumber: 36, columnNumber: 7 }, __self: this })); } function MainComponent() { const [bmi, setBmi] = React.useState(null); const [dietPlan, setDietPlan] = React.useState(''); const [exercisePlan, setExercisePlan] = React.useState(''); const handleFormSubmit = (e)=>{ e.preventDefault(); const height = e.target.height.value; const weight = e.target.weight.value; const healthConditions = e.target.healthConditions.value.split(',').map((cond)=>cond.trim()); const dietPreference = e.target.dietPreference.value; const bmiValue = (weight / (height / 100) ** 2).toFixed(2); setBmi(bmiValue); const dietSuggestion = `${dietPreference} diet plan based on your BMI of ${bmiValue}.`; setDietPlan(dietSuggestion); const exerciseSuggestion = `Exercise routine tailored to your health conditions: ${healthConditions.join(', ')}.`; setExercisePlan(exerciseSuggestion); }; return /*#__PURE__*/ React.createElement("div", { className: "font-roboto bg-gray-100 min-h-screen", __source: { fileName: "", lineNumber: 24, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("header", { className: "bg-blue-600 text-white p-4", __source: { fileName: "", lineNumber: 25, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl", __source: { fileName: "", lineNumber: 26, columnNumber: 9 }, __self: this }, "Personal Fitness Assistant"), /*#__PURE__*/ React.createElement("nav", { className: "flex space-x-4", __source: { fileName: "", lineNumber: 27, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "/", className: "hover:underline", __source: { fileName: "", lineNumber: 28, columnNumber: 11 }, __self: this }, "Home"), /*#__PURE__*/ React.createElement("a", { href: "/registration.html", className: "hover:underline", __source: { fileName: "", lineNumber: 29, columnNumber: 11 }, __self: this }, "Register"), /*#__PURE__*/ React.createElement("a", { href: "/login.html", className: "hover:underline", __source: { fileName: "", lineNumber: 30, columnNumber: 11 }, __self: this }, "Login"), /*#__PURE__*/ React.createElement("a", { href: "/dashboard.html", className: "hover:underline", __source: { fileName: "", lineNumber: 31, columnNumber: 11 }, __self: this }, "Dashboard"), /*#__PURE__*/ React.createElement("a", { href: "/diet.html", className: "hover:underline", __source: { fileName: "", lineNumber: 32, columnNumber: 11 }, __self: this }, "Diet Plan"), /*#__PURE__*/ React.createElement("a", { href: "/exercise.html", className: "hover:underline", __source: { fileName: "", lineNumber: 33, columnNumber: 11 }, __self: this }, "Exercise Plan"), /*#__PURE__*/ React.createElement("a", { href: "/profile.html", className: "hover:underline", __source: { fileName: "", lineNumber: 34, columnNumber: 11 }, __self: this }, "Profile"), /*#__PURE__*/ React.createElement("a", { href: "/about.html", className: "hover:underline", __source: { fileName: "", lineNumber: 35, columnNumber: 11 }, __self: this }, "About"), /*#__PURE__*/ React.createElement("a", { href: "/contact.html", className: "hover:underline", __source: { fileName: "", lineNumber: 36, columnNumber: 11 }, __self: this }, "Contact"))), /*#__PURE__*/ React.createElement("main", { className: "p-6", __source: { fileName: "", lineNumber: 39, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("section", { className: "text-center", __source: { fileName: "", lineNumber: 40, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl mb-4", __source: { fileName: "", lineNumber: 41, columnNumber: 11 }, __self: this }, "Welcome to Personal Fitness Assistant"), /*#__PURE__*/ React.createElement("p", { className: "mb-8", __source: { fileName: "", lineNumber: 42, columnNumber: 11 }, __self: this }, "Your personalized health advice, diet plans, and exercise routines."), /*#__PURE__*/ React.createElement("div", { className: "bg-white p-6 rounded shadow-md w-full max-w-xs mx-auto", __source: { fileName: "", lineNumber: 43, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-lg mb-4", __source: { fileName: "", lineNumber: 44, columnNumber: 13 }, __self: this }, "BMI Calculator"), /*#__PURE__*/ React.createElement("form", { className: "space-y-4", onSubmit: handleFormSubmit, __source: { fileName: "", lineNumber: 45, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 46, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "height", className: "block text-left", __source: { fileName: "", lineNumber: 47, columnNumber: 17 }, __self: this }, "Height (cm)"), /*#__PURE__*/ React.createElement("input", { type: "number", id: "height", name: "height", className: "w-full p-2 border rounded", __source: { fileName: "", lineNumber: 48, columnNumber: 17 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 50, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "weight", className: "block text-left", __source: { fileName: "", lineNumber: 51, columnNumber: 17 }, __self: this }, "Weight (kg)"), /*#__PURE__*/ React.createElement("input", { type: "number", id: "weight", name: "weight", className: "w-full p-2 border rounded", __source: { fileName: "", lineNumber: 52, columnNumber: 17 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 54, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "health-conditions", className: "block text-left", __source: { fileName: "", lineNumber: 55, columnNumber: 17 }, __self: this }, "Health Conditions"), /*#__PURE__*/ React.createElement("input", { type: "text", id: "health-conditions", name: "healthConditions", className: "w-full p-2 border rounded", placeholder: "e.g., diabetes, asthma", __source: { fileName: "", lineNumber: 56, columnNumber: 17 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 58, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "diet-preference", className: "block text-left", __source: { fileName: "", lineNumber: 59, columnNumber: 17 }, __self: this }, "Dietary Preference"), /*#__PURE__*/ React.createElement("select", { id: "diet-preference", name: "dietPreference", className: "w-full p-2 border rounded", __source: { fileName: "", lineNumber: 60, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "vegetarian", __source: { fileName: "", lineNumber: 61, columnNumber: 19 }, __self: this }, "Vegetarian"), /*#__PURE__*/ React.createElement("option", { value: "non-vegetarian", __source: { fileName: "", lineNumber: 62, columnNumber: 19 }, __self: this }, "Non-Vegetarian"))), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "w-full bg-blue-600 text-white p-2 rounded", __source: { fileName: "", lineNumber: 65, columnNumber: 15 }, __self: this }, "Calculate BMI"))), bmi && /*#__PURE__*/ React.createElement("div", { className: "mt-8 bg-blue-100 p-4 rounded shadow-md w-full max-w-xs mx-auto", __source: { fileName: "", lineNumber: 69, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h4", { className: "text-lg", __source: { fileName: "", lineNumber: 70, columnNumber: 15 }, __self: this }, "Your BMI: ", bmi), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 71, columnNumber: 15 }, __self: this }, dietPlan), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 72, columnNumber: 15 }, __self: this }, exercisePlan)))), /*#__PURE__*/ React.createElement("footer", { className: "bg-blue-600 text-white p-4 text-center", __source: { fileName: "", lineNumber: 77, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 78, columnNumber: 9 }, __self: this }, "© 2023 Personal Fitness Assistant"))); }