/** @jsxImportSource https://esm.sh/react@18.2.0 */ import React, { useState, useEffect } from "https://esm.sh/react@18.2.0?deps=react@18.2.0"; import { createRoot } from "https://esm.sh/react-dom@18.2.0/client?deps=react-dom@18.2.0,react@18.2.0"; const HEALTHY_MEALS = [ { name: "Quinoa Avocado Salad", emoji: "🥗", type: "lunch", description: "A nutritious and filling salad packed with protein and healthy fats", calories: 350, protein: 15, ingredients: [ "1 cup cooked quinoa", "1 ripe avocado", "Mixed salad greens", "Cherry tomatoes", "Cucumber", "Olive oil", "Lemon juice", "Salt and pepper" ], recipe: [ "Cook quinoa according to package instructions and let cool", "Chop avocado, tomatoes, and cucumber", "Mix quinoa with chopped vegetables", "Drizzle with olive oil and lemon juice", "Season with salt and pepper", "Toss and serve" ] }, { name: "Protein Packed Breakfast Bowl", emoji: "🥣", type: "breakfast", description: "A hearty breakfast to start your day with energy", calories: 400, protein: 25, ingredients: [ "Greek yogurt", "Chia seeds", "Almonds", "Berries", "Honey", "Granola" ], recipe: [ "Add Greek yogurt to a bowl", "Sprinkle chia seeds and chopped almonds", "Top with fresh berries", "Drizzle with honey", "Add a handful of granola", "Mix and enjoy" ] }, { name: "Grilled Chicken Veggie Wrap", emoji: "🌯", type: "lunch", description: "A light and nutritious lunch option", calories: 380, protein: 30, ingredients: [ "Whole wheat tortilla", "Grilled chicken breast", "Spinach leaves", "Bell peppers", "Hummus", "Feta cheese" ], recipe: [ "Grill chicken breast and slice thinly", "Warm the tortilla", "Spread hummus on tortilla", "Layer spinach, chicken, and bell peppers", "Sprinkle feta cheese", "Roll up the wrap", "Slice in half and serve" ] }, { name: "Overnight Chia Pudding", emoji: "🥛", type: "breakfast", description: "A make-ahead breakfast rich in omega-3 and fiber", calories: 320, protein: 12, ingredients: [ "Chia seeds", "Almond milk", "Maple syrup", "Vanilla extract", "Fresh berries", "Sliced almonds", "Coconut flakes" ], recipe: [ "Mix chia seeds with almond milk in a jar", "Add maple syrup and vanilla extract", "Stir well and refrigerate overnight", "In the morning, top with fresh berries", "Sprinkle sliced almonds and coconut flakes", "Serve chilled" ] }, { name: "Mediterranean Salmon Bowl", emoji: "🐟", type: "dinner", description: "A heart-healthy dinner with omega-3 rich salmon", calories: 450, protein: 35, ingredients: [ "Salmon fillet", "Quinoa", "Roasted vegetables", "Tzatziki sauce", "Kalamata olives", "Fresh dill", "Lemon" ], recipe: [ "Season salmon with salt, pepper, and dill", "Bake salmon at 400°F for 12-15 minutes", "Cook quinoa according to package instructions", "Roast mixed vegetables with olive oil", "Assemble bowl with quinoa base", "Top with salmon and roasted vegetables", "Add tzatziki and garnish with olives" ] }, { name: "Energy-Boosting Trail Mix", emoji: "🥜", type: "snack", description: "A nutrient-dense snack to keep you going", calories: 250, protein: 8, ingredients: [ "Raw almonds", "Pumpkin seeds", "Dark chocolate chips", "Dried cranberries", "Unsweetened coconut flakes", "Goji berries", "Sunflower seeds" ], recipe: [ "Mix all ingredients in a large bowl", "Portion into small containers or bags", "Store in a cool, dry place", "Enjoy as a quick energy boost" ] }, { name: "Vegetarian Buddha Bowl", emoji: "🥦", type: "dinner", description: "A colorful and balanced plant-based dinner", calories: 420, protein: 20, ingredients: [ "Roasted sweet potato", "Chickpeas", "Kale", "Quinoa", "Avocado", "Tahini dressing", "Pumpkin seeds" ], recipe: [ "Roast sweet potato cubes with olive oil", "Crisp chickpeas in the oven with spices", "Cook quinoa and let cool", "Massage kale with lemon juice", "Assemble bowl with quinoa base", "Top with roasted sweet potato and chickpeas", "Add sliced avocado and pumpkin seeds", "Drizzle with tahini dressing" ] }, { name: "Korean Bibimbap Bowl", emoji: "🥢", type: "dinner", description: "A vibrant Korean-inspired rice bowl with mixed vegetables and protein", calories: 480, protein: 25, ingredients: [ "Brown rice", "Marinated beef or tofu", "Spinach", "Carrots", "Zucchini", "Shiitake mushrooms", "Gochujang sauce", "Fried egg" ], recipe: [ "Cook brown rice and set aside", "Marinate beef or tofu in soy sauce and sesame oil", "Sauté vegetables separately with garlic", "Grill or pan-fry marinated protein", "Assemble rice in a bowl", "Arrange vegetables and protein on top", "Fry an egg and place on top", "Drizzle with gochujang sauce" ] }, { name: "Mexican Black Bean Breakfast Burrito", emoji: "🌮", type: "breakfast", description: "A protein-packed morning burrito with a spicy kick", calories: 420, protein: 22, ingredients: [ "Whole wheat tortilla", "Black beans", "Scrambled eggs", "Salsa", "Avocado", "Cilantro", "Low-fat cheese", "Green onions" ], recipe: [ "Warm black beans in a pan", "Scramble eggs with a pinch of salt and pepper", "Warm the tortilla", "Layer black beans, scrambled eggs, and cheese", "Top with fresh salsa and chopped cilantro", "Add sliced avocado", "Roll into a burrito", "Optional: Grill for a crispy exterior" ] }, { name: "Mediterranean Hummus Plate", emoji: "🫒", type: "lunch", description: "A light and refreshing Mediterranean-inspired lunch", calories: 390, protein: 18, ingredients: [ "Homemade or store-bought hummus", "Whole wheat pita", "Cucumber", "Cherry tomatoes", "Kalamata olives", "Feta cheese", "Fresh parsley", "Olive oil" ], recipe: [ "Spread hummus on a plate", "Cut pita into triangles and lightly toast", "Chop cucumber and tomatoes", "Arrange vegetables around hummus", "Sprinkle feta cheese and olives", "Garnish with fresh parsley", "Drizzle with olive oil", "Serve with toasted pita" ] }, { name: "Japanese Edamame Rice Bowl", emoji: "🍚", type: "lunch", description: "A light, protein-rich Japanese-inspired rice bowl", calories: 360, protein: 20, ingredients: [ "Brown rice", "Steamed edamame", "Nori seaweed", "Pickled radish", "Sliced cucumber", "Sesame seeds", "Soy sauce", "Wasabi paste" ], recipe: [ "Cook brown rice and let cool slightly", "Steam edamame pods", "Slice cucumber thinly", "Arrange rice in a bowl", "Top with edamame and cucumber", "Sprinkle with nori and sesame seeds", "Add pickled radish", "Drizzle with soy sauce", "Serve with a small wasabi dollop" ] }, { name: "Protein Power Energy Balls", emoji: "🏋️", type: "snack", description: "No-bake energy balls packed with nutrition", calories: 180, protein: 6, ingredients: [ "Rolled oats", "Peanut butter", "Honey", "Chia seeds", "Protein powder", "Dark chocolate chips", "Vanilla extract" ], recipe: [ "Mix rolled oats and protein powder", "Add peanut butter and honey", "Stir in chia seeds and vanilla", "Mix in dark chocolate chips", "Roll mixture into small balls", "Refrigerate for 30 minutes", "Store in an airtight container" ] } ]; // Rest of the code remains unchanged from previous implementation // (App component, client function, and server function) function App() { const mealTypes = ["all", "breakfast", "lunch", "dinner", "snack"]; const [mealType, setMealType] = useState("all"); const [meal, setMeal] = useState(() => { // Ensure initial meal is always set const initialMeal = getRandomMeal("all"); return initialMeal || HEALTHY_MEALS[0]; }); const [showRecipe, setShowRecipe] = useState(false); function getRandomMeal(currentMealType = "all") { const filteredMeals = currentMealType === "all" ? HEALTHY_MEALS : HEALTHY_MEALS.filter(m => m.type === currentMealType); // Fallback to all meals if no meals match the type const mealsToUse = filteredMeals.length > 0 ? filteredMeals : HEALTHY_MEALS; return mealsToUse[Math.floor(Math.random() * mealsToUse.length)]; } function handleGenerateMeal() { const newMeal = getRandomMeal(mealType); setMeal(newMeal); setShowRecipe(false); } // Fallback render if meal is somehow undefined if (!meal) { return

No meals available

; } return (

🍽️ Healthy Meal Generator

{mealTypes.map(type => ( ))}

{meal.emoji || '🍽️'} {meal.name}

{meal.description}

Meal Type: {meal.type.charAt(0).toUpperCase() + meal.type.slice(1)} | Calories: {meal.calories} | Protein: {meal.protein}g

Ingredients:

{ingredient}

{showRecipe && (

Recipe Instructions:

{step}

)}

); } function client() { createRoot(document.getElementById("root")).render(); } if (typeof document !== "undefined") { client(); } export default async function server(request: Request): Promise { return new Response(` Healthy Meal Generator

`, { headers: { "content-type": "text/html", }, }); }

randomHealthyMealGenerator

Version 9