function WeeklyRecipeFilter({ day, selectedCategory, categories, onCategoryChange, recipes, selectedRecipe, onRecipeChange }) { return /*#__PURE__*/ React.createElement("div", { className: "mb-4 flex flex-wrap justify-around items-center", __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-full md:w-1/4 mb-4 md:mb-0", __source: { fileName: "", lineNumber: 4, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: `${day}-category`, className: "block mb-2 text-lg font-medium text-gray-900", __source: { fileName: "", lineNumber: 5, columnNumber: 9 }, __self: this }, day), /*#__PURE__*/ React.createElement("select", { name: `${day}-category`, id: `${day}-category`, className: "w-full p-2 border border-gray-300 rounded-lg focus:ring-blue-500 focus:border-blue-500", value: selectedCategory, onChange: (e)=>onCategoryChange(day, e.target.value), __source: { fileName: "", lineNumber: 6, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "", __source: { fileName: "", lineNumber: 13, columnNumber: 11 }, __self: this }, "Select a category"), categories.map((category)=>/*#__PURE__*/ React.createElement("option", { key: category, value: category, __source: { fileName: "", lineNumber: 15, columnNumber: 13 }, __self: this }, category)))), /*#__PURE__*/ React.createElement("div", { className: "w-full md:w-2/4" + (selectedCategory ? '' : ' hidden'), __source: { fileName: "", lineNumber: 19, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: `${day}-recipe`, className: "block mb-2 text-lg font-medium text-gray-900", __source: { fileName: "", lineNumber: 20, columnNumber: 9 }, __self: this }, "Select Recipe"), /*#__PURE__*/ React.createElement("select", { name: `${day}-recipe`, id: `${day}-recipe`, className: "w-full p-2 border border-gray-300 rounded-lg focus:ring-blue-500 focus:border-blue-500", value: selectedRecipe, onChange: (e)=>onRecipeChange(day, e.target.value), __source: { fileName: "", lineNumber: 21, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "", __source: { fileName: "", lineNumber: 28, columnNumber: 11 }, __self: this }, "Select a recipe"), recipes[selectedCategory]?.map((recipe)=>/*#__PURE__*/ React.createElement("option", { key: recipe, value: recipe, __source: { fileName: "", lineNumber: 30, columnNumber: 13 }, __self: this }, recipe))))); } function WeeklyRecipeFilterStory() { const daysOfWeek = [ "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday" ]; const categories = [ 'Healthy', 'Fun', 'Quick' ]; const recipes = { Healthy: [ 'Grilled Salmon', 'Kale Salad', 'Smoothies' ], Fun: [ 'Taco Night', 'DIY Pizzas', 'Ice Cream Sundae Bar' ], Quick: [ '15-Minute Stir Fry', 'Instant Pot Chili', 'Microwave Mug Cake' ] }; const handleCategoryChange = (day, category)=>console.log(`${day} category changed to ${category}`); const handleRecipeChange = (day, recipe)=>console.log(`${day} recipe changed to ${recipe}`); return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 50, columnNumber: 5 }, __self: this }, daysOfWeek.map((day)=>/*#__PURE__*/ React.createElement(WeeklyRecipeFilter, { key: day, day: day, selectedCategory: "", categories: categories, onCategoryChange: handleCategoryChange, recipes: recipes, selectedRecipe: "", onRecipeChange: handleRecipeChange, __source: { fileName: "", lineNumber: 52, columnNumber: 9 }, __self: this }))); } function MainComponent() { const daysOfWeek = [ "Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday" ]; const categories = [ 'Healthy', 'Fun', 'Quick' ]; const [selectedCategories, setSelectedCategories] = React.useState({}); const [selectedRecipes, setSelectedRecipes] = React.useState({}); const [mealPlan, setMealPlan] = React.useState(null); const randomRecipes = { Healthy: [ ...Array.from({ length: 200 }).keys() ].map((i)=>({ name: `Healthy Recipe ${i + 1}`, ingredients: [ "ingredient 1", "ingredient 2", "ingredient 3" ] })), Fun: [ ...Array.from({ length: 200 }).keys() ].map((i)=>({ name: `Fun Recipe ${i + 1}`, ingredients: [ "ingredient 1", "ingredient 2", "ingredient 3" ] })), Quick: [ ...Array.from({ length: 200 }).keys() ].map((i)=>({ name: `Quick Recipe ${i + 1}`, ingredients: [ "ingredient 1", "ingredient 2", "ingredient 3" ] })) }; const handleCategoryChange = (day, category)=>{ setSelectedCategories({ ...selectedCategories, [day]: category }); setSelectedRecipes({ ...selectedRecipes, [day]: { ...randomRecipes[category][Math.floor(Math.random() * randomRecipes[category].length)] } }); }; const handleRecipeChange = (day)=>{ setSelectedRecipes({ ...selectedRecipes, [day]: { ...randomRecipes[selectedCategories[day]][Math.floor(Math.random() * randomRecipes[selectedCategories[day]].length)] } }); }; const createMealPlan = ()=>{ setMealPlan(selectedRecipes); }; return /*#__PURE__*/ React.createElement("div", { className: "container mx-auto my-8", __source: { fileName: "", lineNumber: 27, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-semibold text-gray-800 mb-4", __source: { fileName: "", lineNumber: 28, columnNumber: 7 }, __self: this }, "Weekly Meal Plan"), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 29, columnNumber: 7 }, __self: this }, daysOfWeek.map((day)=>/*#__PURE__*/ React.createElement(WeeklyRecipeFilter, { key: day, day: day, selectedCategory: selectedCategories[day] || "", categories: categories, onCategoryChange: handleCategoryChange, recipes: randomRecipes, selectedRecipe: selectedRecipes[day]?.name || "", onRecipeChange: ()=>handleRecipeChange(day), __source: { fileName: "", lineNumber: 31, columnNumber: 11 }, __self: this }))), /*#__PURE__*/ React.createElement("button", { className: "mt-4 p-2 bg-blue-500 text-white rounded hover:bg-blue-700", onClick: createMealPlan, __source: { fileName: "", lineNumber: 43, columnNumber: 7 }, __self: this }, "Create Meal Plan"), mealPlan && /*#__PURE__*/ React.createElement("div", { className: "mt-4", __source: { fileName: "", lineNumber: 45, columnNumber: 9 }, __self: this }, daysOfWeek.map((day)=>/*#__PURE__*/ React.createElement("div", { key: day, className: "mb-4", __source: { fileName: "", lineNumber: 47, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-lg font-bold", __source: { fileName: "", lineNumber: 48, columnNumber: 15 }, __self: this }, day, ":"), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 49, columnNumber: 15 }, __self: this }, "Category: ", selectedCategories[day]), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 50, columnNumber: 15 }, __self: this }, "Recipe: ", mealPlan[day]?.name), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 51, columnNumber: 15 }, __self: this }, "Ingredients: ", mealPlan[day]?.ingredients.join(", ")), /*#__PURE__*/ React.createElement("button", { className: "mt-2 p-1 bg-red-500 text-white rounded hover:bg-red-700", onClick: ()=>handleRecipeChange(day), __source: { fileName: "", lineNumber: 52, columnNumber: 15 }, __self: this }, "Randomise Recipe"))))); }