Prompt

Here is the list of items from the menu:
**Veg Meals Items**
1. Veg Meals
2. Veg Pulao
3. Curd Rice
4. Bagara Rice
5. Jeera Rice
6. Jeera Rice Dal
7. Roti Dal
8. Paneer Roti
9. Plain Parata
10. Allu Parata (2)
11. Roti Sabji
12. Roti Rice Sabji
13. Extra Roti (1)
14. Mushroom Roti
15. Baby Corn Masala Roti
**Non-Veg Meals Items**
1. Chicken Curry Rice
2. Chicken Curry Roti
3. Chicken Roti Rice
4. Rice Egg Curry
5. Mutton Curry Rice
6. Mutton Curry Roti
7. Fish Curry Rice
8. Egg Bhurji Roti
**Veg Currys Items**
1. Dal Fry
2. Paneer Butter Masala
3. Mix Veg
4. Chilli Potato
5. Mushroom Curry
6. Baby Corn Masala
**Non-Veg Curry Items**
1. Chicken Curry
2. Egg Curry
3. Mutton Curry
4. Fish Curry
5. Egg Bhurji
6. Egg Omelet
**Sweet Items**
1. Semiya Payasam
2. Gulab Jamun
3. Jalebi
4. Laddu
**Fried Rice Items**
1. Veg Fried Rice
2. Veg Manchurian Fried Rice
3. Schezwan Fried Rice
4. Paneer Fried Rice
5. Corn Fried Rice
6. Baby Corn Fried Rice
7. Yang Chow Fried Rice
8. Egg Fried Rice
9. Chicken Fried Rice
10. 2 Egg Fried Rice
11. Egg Chicken Fried Rice
**Noodles Items**
1. Veg Maggi Noodles
2. Veg Noodles
3. Veg Manchurian Noodles
4. Paneer Noodles
5. Garlic Mushroom Noodles
6. Chicken Noodles
7. Chicken Maggi Noodles
8. 2 Egg Chicken Noodles
9. Egg Noodles
10. 2 Egg Noodles
11. Egg Maggi Noodles
**Manchurian Items**
1. Veg Manchurian
2. Gobi 65
3. Potato 65
4. Crispy Chilli Veg
5. Chilli Paneer
6. Chicken Manchurian
7. Chilli Chicken Dry / Wet
8. Chicken 65
**Biryani Items**
1. Veg Biryani
2. Chicken Dum Biryani
3. Mutton Biryani
4. Egg Biryani
5. Prawn Biryani
This list includes all items available on the menu. Let me know if you need any modifications! 😊

And for Breakfast these items are available
* Vada
* Ponda
* Plain Dosa
* Single Egg Dosa
* Doubt Egg Dosa
* Puri

I visit this hotel everyday for breakfast, lunch & dinner. Here, I get confused on what to eat. Can you give me the menu for 1 month. That I can repeat every month so I don't need to worry about what to eat.

It should be healthy and should include all the items for entire month. Can be repeated every month.

Can you generate a react program with fixed items for entire year. When I open for perticular day, I should get that menu for breakfast, lunch and dinner.
Also directly open the breakfast if the time is between 7 AM to 12 PM. And if the time is 12 PM to 5 PM it lunch menu should be shown. And from 5 PM to 11 PM dinner.

Use react, pure tailwind & not the shadcn. Use attractive mobile responsive UI.

Code

import React, { useState, useEffect } from 'react';

// Generate meal plan for entire year
const generateYearlyMealPlan = () => {
  const breakfastItems = ['Vada', 'Ponda', 'Plain Dosa', 'Single Egg Dosa', 'Puri'];
  const lunchItems = {
    monday: { main: 'Veg Meals', sides: ['Dal Fry', 'Mix Veg'] },
    tuesday: { main: 'Chicken Curry Rice', sides: ['Mix Veg'] },
    wednesday: { main: 'Veg Biryani', sides: ['Raita'] },
    thursday: { main: 'Roti Dal', sides: ['Paneer Butter Masala'] },
    friday: { main: 'Chicken Dum Biryani', sides: ['Raita'] },
    saturday: { main: 'Veg Pulao', sides: ['Dal Fry', 'Mix Veg'] },
    sunday: { main: 'Mutton Biryani', sides: ['Raita'] }
  };
  const dinnerItems = {
    monday: { main: 'Veg Noodles', sides: ['Veg Manchurian'] },
    tuesday: { main: 'Plain Parata', sides: ['Egg Curry'] },
    wednesday: { main: 'Chicken Noodles', sides: ['Chilli Chicken'] },
    thursday: { main: 'Roti Sabji', sides: ['Paneer Butter Masala'] },
    friday: { main: 'Egg Fried Rice', sides: ['Chilli Chicken'] },
    saturday: { main: 'Allu Parata', sides: ['Mix Veg'] },
    sunday: { main: 'Schezwan Fried Rice', sides: ['Veg Manchurian'] }
  };

  const yearPlan = {};
  const startDate = new Date(2024, 0, 1);
  const endDate = new Date(2024, 11, 31);

  for (let d = new Date(startDate); d <= endDate; d.setDate(d.getDate() + 1)) {
    const date = d.toISOString().split('T')[0];
    const dayOfWeek = d.toLocaleDateString('en-US', { weekday: 'lowercase' });
    
    yearPlan[date] = {
      breakfast: breakfastItems[d.getDate() % breakfastItems.length],
      lunch: lunchItems[dayOfWeek],
      dinner: dinnerItems[dayOfWeek]
    };
  }

  return yearPlan;
};

const MealPlanner = () => {
  const [selectedDate, setSelectedDate] = useState(new Date().toISOString().split('T')[0]);
  const [activeTab, setActiveTab] = useState('');
  const yearlyPlan = generateYearlyMealPlan();

  useEffect(() => {
    const hour = new Date().getHours();
    if (hour >= 7 && hour < 12) {
      setActiveTab('breakfast');
    } else if (hour >= 12 && hour < 17) {
      setActiveTab('lunch');
    } else if (hour >= 17 && hour < 23) {
      setActiveTab('dinner');
    } else {
      setActiveTab('breakfast');
    }
  }, []);

  const mealForDate = yearlyPlan[selectedDate] || {
    breakfast: 'Not available',
    lunch: { main: 'Not available', sides: [] },
    dinner: { main: 'Not available', sides: [] }
  };

  return (
    <div className="min-h-screen bg-gray-100 p-4">
      <div className="max-w-2xl mx-auto">
        <h1 className="text-3xl font-bold text-center mb-6 text-indigo-600">Daily Meal Planner</h1>
        
        <div className="bg-white rounded-lg shadow-lg p-6 mb-6">
          <input
            type="date"
            value={selectedDate}
            onChange={(e) => setSelectedDate(e.target.value)}
            className="w-full p-2 border rounded mb-4 focus:outline-none focus:ring-2 focus:ring-indigo-500"
          />

          <div className="flex mb-4 space-x-2">
            {['breakfast', 'lunch', 'dinner'].map((meal) => (
              <button
                key={meal}
                onClick={() => setActiveTab(meal)}
                className={`flex-1 py-2 px-4 rounded-lg text-sm font-medium transition-colors
                  ${activeTab === meal 
                    ? 'bg-indigo-600 text-white' 
                    : 'bg-gray-200 text-gray-700 hover:bg-gray-300'}`}
              >
                {meal.charAt(0).toUpperCase() + meal.slice(1)}
              </button>
            ))}
          </div>

          <div className="bg-gray-50 rounded-lg p-4">
            {activeTab === 'breakfast' && (
              <div className="space-y-2">
                <h3 className="text-xl font-semibold text-gray-800">Breakfast</h3>
                <p className="text-gray-600">{mealForDate.breakfast}</p>
              </div>
            )}

            {activeTab === 'lunch' && (
              <div className="space-y-2">
                <h3 className="text-xl font-semibold text-gray-800">Lunch</h3>
                <p className="text-gray-600 font-medium">Main: {mealForDate.lunch.main}</p>
                <p className="text-gray-600">
                  Sides: {mealForDate.lunch.sides.join(', ')}
                </p>
              </div>
            )}

            {activeTab === 'dinner' && (
              <div className="space-y-2">
                <h3 className="text-xl font-semibold text-gray-800">Dinner</h3>
                <p className="text-gray-600 font-medium">Main: {mealForDate.dinner.main}</p>
                <p className="text-gray-600">
                  Sides: {mealForDate.dinner.sides.join(', ')}
                </p>
              </div>
            )}
          </div>
        </div>
      </div>
    </div>
  );
};

export default MealPlanner;

Prompt

Menu for Lunch & Dinner
- Curd Rice
- Jeera Rice
- Roti Sabji
- Paneer Roti
- Chicken Curry Roti
- Rice Egg Curry
- Egg Bhurji Roti
- Dal Fry
- Egg Dal Dry
- Paneer Butter Masala
- Egg Curry
- Veg Fried Rice
- Veg Manchurian Fried Rice
- Paneer Fried Rice
- Egg Fried Rice
- Chicken Fried Rice
- 2 Egg Fried Rice
- Egg Chicken Fried Rice
- Roti Sabji [Important as it includes Multiple Sabji every day]

And for Breakfast these items are available
* Vada
* Ponda
* Plain Dosa
* Single Egg Dosa
* Doubt Egg Dosa
* Puri

I visit this hotel everyday for breakfast, lunch & dinner. Here, I get confused on what to eat. Can you give me the menu for 1 month. That I can repeat every month so I don't need to worry about what to eat.

It should be healthy and should include all the items for entire month. Can be repeated every month.

Can you generate a react program with fixed items for entire year. When I open for perticular day, I should get that menu for breakfast, lunch and dinner.
Also directly open the breakfast if the time is between 7 AM to 12 PM. And if the time is 12 PM to 5 PM it lunch menu should be shown. And from 5 PM to 11 PM dinner.

Use react, pure tailwind & not the shadcn. Use attractive mobile responsive UI.

Code

import React, { useState, useEffect } from 'react';

const MenuPlanner = () => {
  const [currentMeal, setCurrentMeal] = useState('breakfast');
  const [currentDay, setCurrentDay] = useState(1);

  // Monthly menu plan
  const menuPlan = {
    breakfast: {
      1: 'Plain Dosa',
      2: 'Puri',
      3: 'Vada',
      4: 'Single Egg Dosa',
      5: 'Ponda',
      6: 'Double Egg Dosa',
      7: 'Plain Dosa',
      8: 'Puri',
      9: 'Vada',
      10: 'Single Egg Dosa',
      11: 'Ponda',
      12: 'Double Egg Dosa',
      13: 'Plain Dosa',
      14: 'Puri',
      15: 'Vada',
      16: 'Single Egg Dosa',
      17: 'Ponda',
      18: 'Double Egg Dosa',
      19: 'Plain Dosa',
      20: 'Puri',
      21: 'Vada',
      22: 'Single Egg Dosa',
      23: 'Ponda',
      24: 'Double Egg Dosa',
      25: 'Plain Dosa',
      26: 'Puri',
      27: 'Vada',
      28: 'Single Egg Dosa',
      29: 'Ponda',
      30: 'Double Egg Dosa',
      31: 'Plain Dosa'
    },
    lunch: {
      1: 'Jeera Rice + Dal Fry',
      2: 'Roti Sabji + Curd Rice',
      3: 'Paneer Roti + Dal Fry',
      4: 'Rice Egg Curry',
      5: 'Veg Fried Rice + Dal Fry',
      6: 'Chicken Curry Roti',
      7: 'Paneer Butter Masala + Roti',
      8: 'Jeera Rice + Egg Dal Dry',
      9: 'Egg Fried Rice',
      10: 'Roti Sabji + Curd Rice',
      11: 'Chicken Fried Rice',
      12: 'Paneer Roti + Dal Fry',
      13: 'Veg Manchurian Fried Rice',
      14: 'Rice Egg Curry',
      15: 'Jeera Rice + Dal Fry',
      16: 'Roti Sabji + Curd Rice',
      17: 'Paneer Fried Rice',
      18: '2 Egg Fried Rice',
      19: 'Chicken Curry Roti',
      20: 'Paneer Butter Masala + Roti',
      21: 'Egg Chicken Fried Rice',
      22: 'Jeera Rice + Egg Dal Dry',
      23: 'Roti Sabji + Dal Fry',
      24: 'Veg Fried Rice',
      25: 'Paneer Roti + Curd Rice',
      26: 'Rice Egg Curry',
      27: 'Veg Manchurian Fried Rice',
      28: 'Chicken Curry Roti',
      29: 'Paneer Butter Masala + Roti',
      30: 'Egg Fried Rice',
      31: 'Jeera Rice + Dal Fry'
    },
    dinner: {
      1: 'Roti Sabji + Dal Fry',
      2: 'Egg Curry + Rice',
      3: 'Veg Fried Rice',
      4: 'Paneer Butter Masala + Roti',
      5: 'Egg Bhurji Roti',
      6: 'Chicken Fried Rice',
      7: 'Roti Sabji + Curd Rice',
      8: 'Paneer Fried Rice',
      9: 'Egg Dal Dry + Rice',
      10: 'Veg Manchurian Fried Rice',
      11: 'Roti Sabji + Dal Fry',
      12: 'Egg Chicken Fried Rice',
      13: 'Paneer Butter Masala + Roti',
      14: 'Rice Egg Curry',
      15: 'Roti Sabji + Curd Rice',
      16: 'Chicken Curry Roti',
      17: '2 Egg Fried Rice',
      18: 'Veg Fried Rice',
      19: 'Paneer Roti + Dal Fry',
      20: 'Egg Curry + Rice',
      21: 'Roti Sabji + Curd Rice',
      22: 'Chicken Fried Rice',
      23: 'Paneer Butter Masala + Roti',
      24: 'Egg Bhurji Roti',
      25: 'Veg Manchurian Fried Rice',
      26: 'Roti Sabji + Dal Fry',
      27: 'Egg Dal Dry + Rice',
      28: 'Paneer Fried Rice',
      29: 'Rice Egg Curry',
      30: 'Chicken Curry Roti',
      31: 'Roti Sabji + Curd Rice'
    }
  };

  useEffect(() => {
    const now = new Date();
    const currentHour = now.getHours();
    const currentDate = now.getDate();

    setCurrentDay(currentDate);

    if (currentHour >= 7 && currentHour < 12) {
      setCurrentMeal('breakfast');
    } else if (currentHour >= 12 && currentHour < 17) {
      setCurrentMeal('lunch');
    } else if (currentHour >= 17 && currentHour < 23) {
      setCurrentMeal('dinner');
    }
  }, []);

  const getMealColor = (meal) => {
    return currentMeal === meal ? 'bg-blue-500 text-white' : 'bg-gray-200 text-gray-700';
  };

  return (
    <div className="min-h-screen bg-gray-100 p-4">
      <div className="max-w-md mx-auto bg-white rounded-lg shadow-lg">
        <div className="p-4">
          <h1 className="text-2xl font-bold text-center mb-4">Daily Meal Planner</h1>
          
          {/* Date Selection */}
          <div className="mb-6">
            <label className="block text-gray-700 text-sm font-bold mb-2">
              Select Date:
            </label>
            <select 
              value={currentDay}
              onChange={(e) => setCurrentDay(parseInt(e.target.value))}
              className="w-full p-2 border rounded focus:outline-none focus:ring-2 focus:ring-blue-500"
            >
              {Array.from({length: 31}, (_, i) => i + 1).map(day => (
                <option key={day} value={day}>Day {day}</option>
              ))}
            </select>
          </div>

          {/* Meal Type Buttons */}
          <div className="grid grid-cols-3 gap-2 mb-6">
            {['breakfast', 'lunch', 'dinner'].map((meal) => (
              <button
                key={meal}
                onClick={() => setCurrentMeal(meal)}
                className={`${getMealColor(meal)} p-2 rounded-lg capitalize font-medium transition-colors duration-200`}
              >
                {meal}
              </button>
            ))}
          </div>

          {/* Menu Display */}
          <div className="bg-gray-50 p-4 rounded-lg">
            <h2 className="text-lg font-semibold text-gray-800 mb-2 capitalize">
              {currentMeal} Menu - Day {currentDay}
            </h2>
            <p className="text-gray-700">
              {menuPlan[currentMeal][currentDay]}
            </p>
          </div>

          {/* Full Day View */}
          <div className="mt-6">
            <h3 className="text-lg font-semibold text-gray-800 mb-3">Full Day Menu</h3>
            <div className="space-y-4">
              <div className="bg-gray-50 p-3 rounded">
                <p className="font-medium text-gray-700">Breakfast:</p>
                <p className="text-gray-600">{menuPlan.breakfast[currentDay]}</p>
              </div>
              <div className="bg-gray-50 p-3 rounded">
                <p className="font-medium text-gray-700">Lunch:</p>
                <p className="text-gray-600">{menuPlan.lunch[currentDay]}</p>
              </div>
              <div className="bg-gray-50 p-3 rounded">
                <p className="font-medium text-gray-700">Dinner:</p>
                <p className="text-gray-600">{menuPlan.dinner[currentDay]}</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

export default MenuPlanner;