function MainComponent() { const [meal, setMeal] = React.useState(null); const meals = [ { name: 'Pancakes', mealType: 'Breakfast', preference: 'Anything', calories: 200, ingredients: [ 'Flour', 'Eggs', 'Milk' ], time: '15 mins', photo: 'pancakes.jpg' }, { name: 'Chicken Salad', mealType: 'Lunch', preference: 'Meat', calories: 450, ingredients: [ 'Chicken', 'Lettuce', 'Tomatoes' ], time: '30 mins', photo: 'chicken_salad.jpg' }, { name: 'Vegetable Stir Fry', mealType: 'Dinner', preference: 'Vegetable', calories: 300, ingredients: [ 'Broccoli', 'Carrots', 'Bell Pepper' ], time: '20 mins', photo: 'vegetable_stir_fry.jpg' }, { name: 'Omelette', mealType: 'Breakfast', preference: 'Meat', calories: 250, ingredients: [ 'Eggs', 'Ham', 'Cheese' ], time: '10 mins', photo: 'omelette.jpg' }, { name: 'Grilled Cheese Sandwich', mealType: 'Lunch', preference: 'Anything', calories: 350, ingredients: [ 'Bread', 'Cheese', 'Butter' ], time: '10 mins', photo: 'grilled_cheese.jpg' }, { name: 'Veggie Burger', mealType: 'Dinner', preference: 'Vegetable', calories: 400, ingredients: [ 'Bun', 'Black Beans', 'Corn' ], time: '25 mins', photo: 'veggie_burger.jpg' } ]; const getFilteredMeals = (mealType, preference, calories)=>{ return meals.filter((meal)=>meal.mealType === mealType && (preference === 'Anything' || meal.preference === preference) && meal.calories <= parseInt(calories)); }; const fetchMeal = (mealType, preference, calories)=>{ const filteredMeals = getFilteredMeals(mealType, preference, calories); const randomMeal = filteredMeals[Math.floor(Math.random() * filteredMeals.length)]; setMeal(randomMeal); }; const handleSubmit = (event)=>{ event.preventDefault(); const form = event.target; const mealType = form.elements.mealType.value; const preference = form.elements.preference.value; const calories = form.elements.calories.value; fetchMeal(mealType, preference, calories); }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center p-4", __source: { fileName: "", lineNumber: 38, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-crimson-text mb-4", __source: { fileName: "", lineNumber: 39, columnNumber: 7 }, __self: this }, "Random Meal Generator"), /*#__PURE__*/ React.createElement("form", { className: "w-full max-w-md bg-white shadow-md rounded px-8 pt-6 pb-8 mb-4", onSubmit: handleSubmit, __source: { fileName: "", lineNumber: 40, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 41, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-gray-700 text-sm font-bold mb-2", htmlFor: "mealType", __source: { fileName: "", lineNumber: 42, columnNumber: 11 }, __self: this }, "Meal Type"), /*#__PURE__*/ React.createElement("select", { name: "mealType", className: "block appearance-none w-full bg-gray-200 border border-gray-200 text-gray-700 py-3 px-4 pr-8 rounded leading-tight focus:outline-none focus:bg-white focus:border-gray-500", id: "mealType", __source: { fileName: "", lineNumber: 43, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("option", { __source: { fileName: "", lineNumber: 44, columnNumber: 13 }, __self: this }, "Breakfast"), /*#__PURE__*/ React.createElement("option", { __source: { fileName: "", lineNumber: 45, columnNumber: 13 }, __self: this }, "Lunch"), /*#__PURE__*/ React.createElement("option", { __source: { fileName: "", lineNumber: 46, columnNumber: 13 }, __self: this }, "Dinner"))), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 49, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-gray-700 text-sm font-bold mb-2", htmlFor: "preference", __source: { fileName: "", lineNumber: 50, columnNumber: 11 }, __self: this }, "Preference"), /*#__PURE__*/ React.createElement("select", { name: "preference", className: "block appearance-none w-full bg-gray-200 border border-gray-200 text-gray-700 py-3 px-4 pr-8 rounded leading-tight focus:outline-none focus:bg-white focus:border-gray-500", id: "preference", __source: { fileName: "", lineNumber: 51, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("option", { __source: { fileName: "", lineNumber: 52, columnNumber: 13 }, __self: this }, "Anything"), /*#__PURE__*/ React.createElement("option", { __source: { fileName: "", lineNumber: 53, columnNumber: 13 }, __self: this }, "Meat"), /*#__PURE__*/ React.createElement("option", { __source: { fileName: "", lineNumber: 54, columnNumber: 13 }, __self: this }, "Vegetable"))), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 57, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-gray-700 text-sm font-bold mb-2", htmlFor: "calories", __source: { fileName: "", lineNumber: 58, columnNumber: 11 }, __self: this }, "Calories (max)"), /*#__PURE__*/ React.createElement("input", { name: "calories", className: "block w-full bg-gray-200 text-gray-700 border border-gray-200 rounded py-3 px-4 leading-tight focus:outline-none focus:bg-white focus:border-gray-500", id: "calories", type: "number", placeholder: "e.g. 500", __source: { fileName: "", lineNumber: 59, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-between", __source: { fileName: "", lineNumber: 61, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline", type: "submit", __source: { fileName: "", lineNumber: 62, columnNumber: 11 }, __self: this }, "Get Random Meal"))), /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-md bg-white shadow-md rounded px-8 pt-6 pb-8 mb-4", __source: { fileName: "", lineNumber: 65, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-crimson-text mb-2", __source: { fileName: "", lineNumber: 66, columnNumber: 9 }, __self: this }, "Your Random Meal:"), meal ? /*#__PURE__*/ React.createElement("div", { className: "text-gray-700 text-base", __source: { fileName: "", lineNumber: 68, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: meal.photo, alt: `photo of ${meal.name}`, className: "w-[200px] h-[200px] mb-4 mx-auto", __source: { fileName: "", lineNumber: 69, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 70, columnNumber: 13 }, __self: this }, "Name: ", meal.name), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 71, columnNumber: 13 }, __self: this }, "Calories: ", meal.calories), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 72, columnNumber: 13 }, __self: this }, "Ingredients: ", meal.ingredients.join(", ")), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 73, columnNumber: 13 }, __self: this }, "Time to prepare: ", meal.time)) : /*#__PURE__*/ React.createElement("p", { className: "text-gray-700 text-base", __source: { fileName: "", lineNumber: 76, columnNumber: 11 }, __self: this }, "Meal details will appear here based on your input."))); }