"use client" import { useState } from "react" import { motion } from "framer-motion" import { fadeIn, slideUp, stagger, staggerItem, cardHoverTarget, buttonTapTarget } from "@/lib/animations" import { Button } from "@/components/ui/button" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Badge } from "@/components/ui/badge" import { Separator } from "@/components/ui/separator" import { cn } from "@/lib/utils" import { UtensilsCrossed, Calendar, Plus, ChefHat, Apple, Coffee, Pizza, ArrowRight, } from "lucide-react" const daysOfWeek = ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"] const defaultMeals = { Mon: { breakfast: "Oatmeal & Berries", lunch: "Grilled Chicken Salad", dinner: "Salmon with Quinoa" }, Tue: { breakfast: "Avocado Toast", lunch: "Turkey Wrap", dinner: "Pasta Primavera" }, Wed: { breakfast: "Smoothie Bowl", lunch: "Caesar Salad", dinner: "Beef Stir Fry" }, Thu: { breakfast: "Eggs & Toast", lunch: "Lentil Soup", dinner: "Baked Cod" }, Fri: { breakfast: "Pancakes", lunch: "Sushi Bowl", dinner: "Pizza Night" }, Sat: { breakfast: "French Toast", lunch: "Burgers", dinner: "Steak & Potatoes" }, Sun: { breakfast: "Breakfast Burrito", lunch: "Roasted Chicken", dinner: "Lasagna" }, } export default function MealPlanner() { const [selectedDay, setSelectedDay] = useState("Mon") const [meals, setMeals] = useState(defaultMeals) const mealTypes = [ { id: "breakfast", label: "Breakfast", icon: Coffee, color: "text-amber-500" }, { id: "lunch", label: "Lunch", icon: Apple, color: "text-green-500" }, { id: "dinner", label: "Dinner", icon: Pizza, color: "text-red-500" }, ] return (

Meal Planner

Weekly{" "} Meal Plan

Plan your meals for the week ahead.

{daysOfWeek.map((day) => ( ))}

{selectedDay}'s Meals {mealTypes.map((mt) => { const Icon = mt.icon return (

{mt.label}

{(meals as any)[selectedDay]?.[mt.id as string]}

) })}

Shopping list: Salmon, quinoa, mixed greens, avocado, tomatoes

) }

Meal Planner

Weekly Meal Plan

Weekly Meal Plan