[V0_FILE]typescriptreact:file="components/ui/textarea.tsx" isMerged="true" import * as React from "react" import { cn } from "@/lib/utils" export interface TextareaProps extends React.TextareaHTMLAttributes {} const Textarea = React.forwardRef( ({ className, ...props }, ref) => { return (

)
  }
)
Textarea.displayName = "Textarea"

export { Textarea }
[V0_FILE]typescriptreact:file="components/ui/select.tsx" isMerged="true"
"use client"

import * as React from "react"
import * as SelectPrimitive from "@radix-ui/react-select"
import { Check, ChevronDown, ChevronUp } from 'lucide-react'

import { cn } from "@/lib/utils"

const Select = SelectPrimitive.Root

const SelectGroup = SelectPrimitive.Group

const SelectValue = SelectPrimitive.Value

const SelectTrigger = React.forwardRef<
  React.ElementRef<typeof SelectPrimitive.Trigger>,
  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>
>(({ className, children, ...props }, ref) => (
  <SelectPrimitive.Trigger
    ref={ref}
    className={cn(
      "flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
      className
    )}
    {...props}
  >
    {children}
    <SelectPrimitive.Icon asChild>
      <ChevronDown className="h-4 w-4 opacity-50" />
    </SelectPrimitive.Icon>
  </SelectPrimitive.Trigger>
))
SelectTrigger.displayName = SelectPrimitive.Trigger.displayName

const SelectScrollUpButton = React.forwardRef<
  React.ElementRef<typeof SelectPrimitive.ScrollUpButton>,
  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollUpButton>
>(({ className, ...props }, ref) => (
  <SelectPrimitive.ScrollUpButton
    ref={ref}
    className={cn(
      "flex cursor-default items-center justify-center py-1",
      className
    )}
    {...props}
  >
    <ChevronUp className="h-4 w-4" />
  </SelectPrimitive.ScrollUpButton>
))
SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName

const SelectScrollDownButton = React.forwardRef<
  React.ElementRef<typeof SelectPrimitive.ScrollDownButton>,
  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollDownButton>
>(({ className, ...props }, ref) => (
  <SelectPrimitive.ScrollDownButton
    ref={ref}
    className={cn(
      "flex cursor-default items-center justify-center py-1",
      className
    )}
    {...props}
  >
    <ChevronDown className="h-4 w-4" />
  </SelectPrimitive.ScrollDownButton>
))
SelectScrollDownButton.displayName =
  SelectPrimitive.ScrollDownButton.displayName

const SelectContent = React.forwardRef<
  React.ElementRef<typeof SelectPrimitive.Content>,
  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>
>(({ className, children, position = "popper", ...props }, ref) => (
  <SelectPrimitive.Portal>
    <SelectPrimitive.Content
      ref={ref}
      className={cn(
        "relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
        position === "popper" &&
          "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
        className
      )}
      position={position}
      {...props}
    >
      <SelectScrollUpButton />
      <SelectPrimitive.Viewport
        className={cn(
          "p-1",
          position === "popper" &&
            "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]"
        )}
      >
        {children}
      </SelectPrimitive.Viewport>
      <SelectScrollDownButton />
    </SelectPrimitive.Content>
  </SelectPrimitive.Portal>
))
SelectContent.displayName = SelectPrimitive.Content.displayName

const SelectLabel = React.forwardRef<
  React.ElementRef<typeof SelectPrimitive.Label>,
  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label>
>(({ className, ...props }, ref) => (
  <SelectPrimitive.Label
    ref={ref}
    className={cn("py-1.5 pl-8 pr-2 text-sm font-semibold", className)}
    {...props}
  />
))
SelectLabel.displayName = SelectPrimitive.Label.displayName

const SelectItem = React.forwardRef<
  React.ElementRef<typeof SelectPrimitive.Item>,
  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item>
>(({ className, children, ...props }, ref) => (
  <SelectPrimitive.Item
    ref={ref}
    className={cn(
      "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
      className
    )}
    {...props}
  >
    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
      <SelectPrimitive.ItemIndicator>
        <Check className="h-4 w-4" />
      </SelectPrimitive.ItemIndicator>
    </span>

<SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
  </SelectPrimitive.Item>
))
SelectItem.displayName = SelectPrimitive.Item.displayName

const SelectSeparator = React.forwardRef<
  React.ElementRef<typeof SelectPrimitive.Separator>,
  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator>
>(({ className, ...props }, ref) => (
  <SelectPrimitive.Separator
    ref={ref}
    className={cn("-mx-1 my-1 h-px bg-muted", className)}
    {...props}
  />
))
SelectSeparator.displayName = SelectPrimitive.Separator.displayName

export {
  Select,
  SelectGroup,
  SelectValue,
  SelectTrigger,
  SelectContent,
  SelectLabel,
  SelectItem,
  SelectSeparator,
  SelectScrollUpButton,
  SelectScrollDownButton,
}
[V0_FILE]typescriptreact:file="components/ui/badge.tsx" isMerged="true"
import * as React from "react"
import { cva, type VariantProps } from "class-variance-authority"

import { cn } from "@/lib/utils"

const badgeVariants = cva(
  "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
  {
    variants: {
      variant: {
        default:
          "border-transparent bg-primary text-primary-foreground hover:bg-primary/80",
        secondary:
          "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
        destructive:
          "border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80",
        outline: "text-foreground",
      },
    },
    defaultVariants: {
      variant: "default",
    },
  }
)

export interface BadgeProps
  extends React.HTMLAttributes<HTMLDivElement>,
    VariantProps<typeof badgeVariants> {}

function Badge({ className, variant, ...props }: BadgeProps) {
  return (
    <div className={cn(badgeVariants({ variant }), className)} {...props} />
  )
}

export { Badge, badgeVariants }
[V0_FILE]typescriptreact:file="app/api/generate-recipe/route.ts" isFixed="true" isEdit="true" isQuickEdit="true"
import { generateObject } from 'ai'
import { openai } from '@ai-sdk/openai'
import { z } from 'zod'

const recipeSchema = z.object({
  recipe: z.object({
    name: z.string().describe('Creative and appetizing recipe name'),
    description: z.string().describe('Brief, enticing description of the dish'),
    prepTime: z.number().describe('Preparation time in minutes'),
    cookTime: z.number().describe('Cooking time in minutes'),
    totalTime: z.number().describe('Total time in minutes'),
    servings: z.number().describe('Number of servings'),
    difficulty: z.enum(['Easy', 'Medium', 'Hard']).describe('Difficulty level'),
    ingredients: z.array(z.object({
      name: z.string().describe('Ingredient name'),
      amount: z.string().describe('Amount needed (e.g., 2 cups, 1 lb)'),
      notes: z.string().optional().describe('Optional preparation notes')
    })).describe('List of ingredients with amounts'),
    equipment: z.array(z.string()).describe('Kitchen equipment needed from the available list'),
    instructions: z.array(z.object({
      step: z.number().describe('Step number'),
      instruction: z.string().describe('Detailed instruction for this step'),
      time: z.number().optional().describe('Time for this step in minutes if applicable')
    })).describe('Step-by-step cooking instructions'),
    tips: z.array(z.string()).describe('Helpful cooking tips and variations'),
    nutritionHighlights: z.array(z.string()).describe('Key nutritional benefits or highlights')
  })
})

// Mock recipe generator for when API is not available
function generateMockRecipe(ingredients: string[], cuisine: string, timeAvailable: number, equipment: string[]) {
  const cuisineRecipes = {
    italian: {
      name: "Rustic Italian Pasta",
      description: "A hearty pasta dish with fresh ingredients and authentic Italian flavors",
    },
    mexican: {
      name: "Zesty Mexican Bowl",
      description: "A vibrant and flavorful Mexican-inspired dish with fresh ingredients",
    },
    asian: {
      name: "Asian Fusion Stir-Fry",
      description: "A quick and delicious stir-fry with Asian-inspired flavors",
    },
    american: {
      name: "Classic American Comfort Food",
      description: "A satisfying American-style dish perfect for any occasion",
    },
    mediterranean: {
      name: "Mediterranean Delight",
      description: "A healthy and flavorful Mediterranean dish with fresh ingredients",
    },
    indian: {
      name: "Aromatic Indian Curry",
      description: "A fragrant and spicy Indian dish with warming spices",
    },
    french: {
      name: "French Bistro Classic",
      description: "An elegant French dish with sophisticated flavors",
    },
    thai: {
      name: "Thai Street Food Special",
      description: "A bold and flavorful Thai dish with authentic ingredients",
    },
    japanese: {
      name: "Japanese Home Cooking",
      description: "A simple yet refined Japanese dish with clean flavors",
    },
    "comfort-food": {
      name: "Ultimate Comfort Food",
      description: "A warming and satisfying comfort food dish",
    }
  }

const recipeTemplate = cuisineRecipes[cuisine as keyof typeof cuisineRecipes] || cuisineRecipes.american
  
  // Use actual ingredients provided by user
  const recipeIngredients = ingredients.slice(0, 8).map((ingredient, index) => ({
    name: ingredient,
    amount: index === 0 ? "1 lb" : index === 1 ? "2 cups" : index === 2 ? "3 cloves" : index === 3 ? "1 cup" : "1/2 cup",
    notes: index === 0 ? "main ingredient" : undefined
  }))

// Add some basic ingredients if needed
  if (recipeIngredients.length < 4) {
    recipeIngredients.push(
      { name: "olive oil", amount: "2 tbsp" },
      { name: "salt", amount: "to taste" },
      { name: "black pepper", amount: "to taste" }
    )
  }

const difficulty = timeAvailable <= 30 ? 'Easy' : timeAvailable <= 60 ? 'Medium' : 'Hard'
  const prepTime = Math.min(15, Math.floor(timeAvailable * 0.3))
  const cookTime = timeAvailable - prepTime
  
  const steps = [
    {
      step: 1,
      instruction: `Prepare all ingredients by washing and chopping ${ingredients[0] || 'main ingredient'}. Gather your equipment and organize your workspace.`,
      time: prepTime
    },
    {
      step: 2,
      instruction: `Heat olive oil in your cooking vessel and add aromatics like garlic, onions, or ginger to build the flavor base.`,
      time: 3
    },
    {
      step: 3,
      instruction: `Add your main ingredients and cook according to the ${cuisine} style, stirring occasionally to prevent sticking.`,
      time: Math.floor(cookTime * 0.6)
    },
    {
      step: 4,
      instruction: `Season with salt, pepper, and cuisine-specific spices. Taste and adjust flavors as needed.`,
      time: 2
    },
    {
      step: 5,
      instruction: `Finish cooking and let rest briefly. Garnish appropriately and serve hot.`,
      time: Math.floor(cookTime * 0.2)
    }
  ]
  
  return {
    recipe: {
      name: recipeTemplate.name,
      description: recipeTemplate.description,
      prepTime,
      cookTime,
      totalTime: timeAvailable,
      servings: 4,
      difficulty,
      ingredients: recipeIngredients,
      equipment: equipment.slice(0, 3).length > 0 ? equipment.slice(0, 3) : ["Stovetop", "Pan", "Knife"],
      instructions: steps,
      tips: [
        "Taste and adjust seasoning throughout the cooking process",
        "Don't overcrowd the pan - cook in batches if necessary",
        "Fresh ingredients make a significant difference in flavor",
        `This ${cuisine} dish pairs well with rice, bread, or a simple salad`
      ],
      nutritionHighlights: [
        "Rich in vitamins and minerals",
        "Good source of protein",
        "Contains healthy fats",
        "Balanced macronutrients"
      ]
    }
  }
}

export async function POST(req: Request) {
  try {
    const { ingredients, equipment, cuisine, timeAvailable, dietaryRestrictions } = await req.json()

// Check if we have an API key available
    const hasApiKey = process.env.OPENAI_API_KEY && process.env.OPENAI_API_KEY.length > 0

if (hasApiKey) {
      try {
        const equipmentList = equipment.length > 0 ? equipment.join(', ') : 'basic kitchen tools'
        const dietaryText = dietaryRestrictions ? ` The recipe should accommodate these dietary restrictions: ${dietaryRestrictions}.` : ''

const prompt = `Create a delicious ${cuisine} recipe using these available ingredients: ${ingredients.join(', ')}. 
        
        Available equipment: ${equipmentList}
        Maximum total cooking time: ${timeAvailable} minutes
        ${dietaryText}
        
        Requirements:
        - Use as many of the provided ingredients as possible
        - Stay within the time limit of ${timeAvailable} minutes
        - Only use equipment from the available list
        - Make the recipe practical and delicious
        - Include helpful tips and cooking techniques
        - Ensure the recipe fits the ${cuisine} cuisine style
        - Provide realistic cooking times for each step
        - Include nutritional highlights of the dish
        
        If some ingredients don't work well together or with the cuisine type, prioritize the most important ones and suggest the best combination. Be creative but practical.`

const { object } = await generateObject({
          model: openai('gpt-4o'),
          schema: recipeSchema,
          prompt,
        })

return Response.json(object)
      } catch (aiError) {
        console.log('AI generation failed, falling back to mock recipe:', aiError)
        // Fall back to mock recipe if AI fails
        const mockRecipe = generateMockRecipe(ingredients, cuisine, timeAvailable, equipment)
        await new Promise(resolve => setTimeout(resolve, 1500)) // Simulate API delay
        return Response.json(mockRecipe)
      }
    } else {
      // Use mock recipe generation when no API key is available
      console.log('No API key available, using mock recipe generation')
      const mockRecipe = generateMockRecipe(ingredients, cuisine, timeAvailable, equipment)
      await new Promise(resolve => setTimeout(resolve, 1500)) // Simulate API delay
      return Response.json(mockRecipe)
    }
  } catch (error) {
    console.error('Error in recipe generation:', error)
    return Response.json(
      { error: 'Failed to generate recipe. Please try again.' },
      { status: 500 }
    )
  }
}
[V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true"
'use client'

import { useState } from 'react'
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Textarea } from "@/components/ui/textarea"
import { Badge } from "@/components/ui/badge"
import { Clock, ChefHat, Utensils, X, Sparkles } from 'lucide-react'

interface Recipe {
  name: string
  description: string
  prepTime: number
  cookTime: number
  totalTime: number
  servings: number
  difficulty: string
  ingredients: Array<{
    name: string
    amount: string
    notes?: string
  }>
  equipment: string[]
  instructions: Array<{
    step: number
    instruction: string
    time?: number
  }>
  tips: string[]
  nutritionHighlights: string[]
}

export default function RecipeGenerator() {
  const [ingredients, setIngredients] = useState<string[]>([])
  const [currentIngredient, setCurrentIngredient] = useState('')
  const [equipment, setEquipment] = useState<string[]>([])
  const [cuisine, setCuisine] = useState('')
  const [timeAvailable, setTimeAvailable] = useState('')
  const [dietaryRestrictions, setDietaryRestrictions] = useState('')
  const [recipe, setRecipe] = useState<Recipe | null>(null)
  const [isGenerating, setIsGenerating] = useState(false)

const addIngredient = () => {
    if (currentIngredient.trim() && !ingredients.includes(currentIngredient.trim())) {
      setIngredients([...ingredients, currentIngredient.trim()])
      setCurrentIngredient('')
    }
  }

const removeIngredient = (ingredient: string) => {
    setIngredients(ingredients.filter(i => i !== ingredient))
  }

const generateRecipe = async () => {
    if (ingredients.length === 0 || !cuisine || !timeAvailable) {
      alert('Please fill in all required fields')
      return
    }

setIsGenerating(true)
    try {
      const response = await fetch('/api/generate-recipe', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({
          ingredients,
          equipment,
          cuisine,
          timeAvailable: parseInt(timeAvailable),
          dietaryRestrictions,
        }),
      })

if (!response.ok) {
        throw new Error('Failed to generate recipe')
      }

const data = await response.json()
      setRecipe(data.recipe)
    } catch (error) {
      console.error('Error generating recipe:', error)
      alert('Failed to generate recipe. Please try again.')
    } finally {
      setIsGenerating(false)
    }
  }

const equipmentOptions = [
    'Stovetop', 'Oven', 'Microwave', 'Air Fryer', 'Slow Cooker', 'Pressure Cooker',
    'Grill', 'Blender', 'Food Processor', 'Stand Mixer', 'Hand Mixer', 'Toaster'
  ]

return (
    <div className="min-h-screen bg-gradient-to-br from-orange-50 to-red-50 p-4">
      <div className="max-w-6xl mx-auto">
        <div className="text-center mb-8">
          <div className="flex items-center justify-center gap-2 mb-2">
            <Sparkles className="w-8 h-8 text-orange-500" />
            <h1 className="text-4xl font-bold text-gray-900">AI Recipe Generator</h1>
            <Sparkles className="w-8 h-8 text-orange-500" />
          </div>
          <p className="text-lg text-gray-600">Create delicious recipes from your available ingredients using AI</p>
        </div>

<div className="grid lg:grid-cols-2 gap-8">
          {/* Input Form */}
          <Card>
            <CardHeader>
              <CardTitle className="flex items-center gap-2">
                <ChefHat className="w-5 h-5" />
                Recipe Preferences
              </CardTitle>
              <CardDescription>
                Tell us what you have and what you're craving
              </CardDescription>
            </CardHeader>
            <CardContent className="space-y-6">
              {/* Ingredients */}
              <div>
                <Label htmlFor="ingredients" className="text-sm font-medium">
                  Available Ingredients *
                </Label>
                <div className="flex gap-2 mt-1">
                  <Input
                    id="ingredients"
                    value={currentIngredient}
                    onChange={(e) => setCurrentIngredient(e.target.value)}
                    placeholder="e.g., chicken breast, tomatoes, garlic"
                    onKeyPress={(e) => e.key === 'Enter' && addIngredient()}
                  />
                  <Button onClick={addIngredient} variant="outline">Add</Button>
                </div>
                <div className="flex flex-wrap gap-2 mt-2">
                  {ingredients.map((ingredient) => (
                    <Badge key={ingredient} variant="secondary" className="flex items-center gap-1">
                      {ingredient}
                      <X 
                        className="w-3 h-3 cursor-pointer" 
                        onClick={() => removeIngredient(ingredient)}
                      />
                    </Badge>
                  ))}
                </div>
              </div>

{/* Equipment */}
              <div>
                <Label className="text-sm font-medium">Available Equipment</Label>
                <div className="grid grid-cols-2 gap-2 mt-2">
                  {equipmentOptions.map((item) => (
                    <label key={item} className="flex items-center space-x-2">
                      <input
                        type="checkbox"
                        checked={equipment.includes(item)}
                        onChange={(e) => {
                          if (e.target.checked) {
                            setEquipment([...equipment, item])
                          } else {
                            setEquipment(equipment.filter(eq => eq !== item))
                          }
                        }}
                        className="rounded"
                      />
                      <span className="text-sm">{item}</span>
                    </label>
                  ))}
                </div>
              </div>

{/* Cuisine Type */}
              <div>
                <Label htmlFor="cuisine" className="text-sm font-medium">
                  Cuisine Type *
                </Label>
                <Select value={cuisine} onValueChange={setCuisine}>
                  <SelectTrigger className="mt-1">
                    <SelectValue placeholder="Select cuisine type" />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="italian">Italian</SelectItem>
                    <SelectItem value="mexican">Mexican</SelectItem>
                    <SelectItem value="asian">Asian</SelectItem>
                    <SelectItem value="american">American</SelectItem>
                    <SelectItem value="mediterranean">Mediterranean</SelectItem>
                    <SelectItem value="indian">Indian</SelectItem>
                    <SelectItem value="french">French</SelectItem>
                    <SelectItem value="thai">Thai</SelectItem>
                    <SelectItem value="japanese">Japanese</SelectItem>
                    <SelectItem value="comfort-food">Comfort Food</SelectItem>
                  </SelectContent>
                </Select>
              </div>

{/* Time Available */}
              <div>
                <Label htmlFor="time" className="text-sm font-medium">
                  Time Available (minutes) *
                </Label>
                <Select value={timeAvailable} onValueChange={setTimeAvailable}>
                  <SelectTrigger className="mt-1">
                    <SelectValue placeholder="How much time do you have?" />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="15">15 minutes (Quick & Easy)</SelectItem>
                    <SelectItem value="30">30 minutes (Fast)</SelectItem>
                    <SelectItem value="45">45 minutes (Moderate)</SelectItem>
                    <SelectItem value="60">1 hour (Standard)</SelectItem>
                    <SelectItem value="90">1.5 hours (Elaborate)</SelectItem>
                    <SelectItem value="120">2+ hours (Slow Cook)</SelectItem>
                  </SelectContent>
                </Select>
              </div>

{/* Dietary Restrictions */}
              <div>
                <Label htmlFor="dietary" className="text-sm font-medium">
                  Dietary Restrictions (Optional)
                </Label>
                <Textarea
                  id="dietary"
                  value={dietaryRestrictions}
                  onChange={(e) => setDietaryRestrictions(e.target.value)}
                  placeholder="e.g., vegetarian, gluten-free, dairy-free, low-sodium"
                  className="mt-1"
                  rows={2}
                />
              </div>

<Button 
                onClick={generateRecipe} 
                disabled={isGenerating || ingredients.length === 0 || !cuisine || !timeAvailable}
                className="w-full"
                size="lg"
              >
                {isGenerating ? (
                  <div className="flex items-center gap-2">
                    <div className="animate-spin rounded-full h-4 w-4 border-b-2 border-white"></div>
                    Generating Recipe...
                  </div>
                ) : (
                  <div className="flex items-center gap-2">
                    <Sparkles className="w-4 h-4" />
                    Generate Recipe
                  </div>
                )}
              </Button>
            </CardContent>
          </Card>

{/* Generated Recipe */}
          <Card>
            <CardHeader>
              <CardTitle className="flex items-center gap-2">
                <Utensils className="w-5 h-5" />
                Your Generated Recipe
              </CardTitle>
              <CardDescription>
                {recipe ? 'Here\'s your personalized recipe!' : 'Your recipe will appear here'}
              </CardDescription>
            </CardHeader>
            <CardContent>
              {isGenerating ? (
                <div className="flex flex-col items-center justify-center py-12">
                  <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-orange-500 mb-4"></div>
                  <p className="text-lg font-medium">Creating your perfect recipe...</p>
                  <p className="text-sm text-gray-500 mt-1">This may take a few moments</p>
                </div>
              ) : recipe ? (
                <div className="space-y-6">
                  {/* Recipe Header */}
                  <div>
                    <h3 className="text-2xl font-bold text-gray-900">{recipe.name}</h3>
                    <p className="text-gray-600 mt-1">{recipe.description}</p>
                    
                    <div className="flex flex-wrap gap-4 mt-4 text-sm">
                      <div className="flex items-center gap-1">
                        <Clock className="w-4 h-4" />
                        <span>{recipe.totalTime} min total</span>
                      </div>
                      <Badge variant="outline">{recipe.difficulty}</Badge>
                      <Badge variant="outline">{recipe.servings} servings</Badge>
                    </div>
                  </div>

{/* Ingredients */}
                  <div>
                    <h4 className="font-semibold text-lg mb-2">Ingredients</h4>
                    <ul className="space-y-1">
                      {recipe.ingredients.map((ingredient, index) => (
                        <li key={index} className="flex justify-between">
                          <span>{ingredient.name}</span>
                          <span className="text-gray-600">{ingredient.amount}</span>
                        </li>
                      ))}
                    </ul>
                  </div>

{/* Equipment */}
                  {recipe.equipment.length > 0 && (
                    <div>
                      <h4 className="font-semibold text-lg mb-2">Equipment Needed</h4>
                      <div className="flex flex-wrap gap-2">
                        {recipe.equipment.map((item, index) => (
                          <Badge key={index} variant="secondary">{item}</Badge>
                        ))}
                      </div>
                    </div>
                  )}

{/* Instructions */}
                  <div>
                    <h4 className="font-semibold text-lg mb-2">Instructions</h4>
                    <ol className="space-y-3">
                      {recipe.instructions.map((instruction, index) => (
                        <li key={index} className="flex gap-3">
                          <span className="flex-shrink-0 w-6 h-6 bg-orange-500 text-white rounded-full flex items-center justify-center text-sm font-medium">
                            {instruction.step}
                          </span>
                          <div>
                            <p>{instruction.instruction}</p>
                            {instruction.time && (
                              <p className="text-sm text-gray-500 mt-1">⏱️ {instruction.time} minutes</p>
                            )}
                          </div>
                        </li>
                      ))}
                    </ol>
                  </div>

{/* Tips */}
                  {recipe.tips.length > 0 && (
                    <div>
                      <h4 className="font-semibold text-lg mb-2">Chef's Tips</h4>
                      <ul className="space-y-1">
                        {recipe.tips.map((tip, index) => (
                          <li key={index} className="text-sm text-gray-700">• {tip}</li>
                        ))}
                      </ul>
                    </div>
                  )}

{/* Nutrition Highlights */}
                  {recipe.nutritionHighlights.length > 0 && (
                    <div>
                      <h4 className="font-semibold text-lg mb-2">Nutrition Highlights</h4>
                      <div className="flex flex-wrap gap-2">
                        {recipe.nutritionHighlights.map((highlight, index) => (
                          <Badge key={index} variant="outline" className="text-green-700 border-green-200">
                            {highlight}
                          </Badge>
                        ))}
                      </div>
                    </div>
                  )}
                </div>
              ) : (
                <div className="text-center py-12 text-gray-500">
                  <ChefHat className="w-12 h-12 mx-auto mb-4 opacity-50" />
                  <p>Fill out the form and click "Generate Recipe" to get started!</p>
                  <p className="text-sm mt-2">Try ingredients like: chicken, rice, tomatoes, garlic</p>
                </div>
              )}
            </CardContent>
          </Card>
        </div>
      </div>
    </div>
  )
}</article></body></html>

About

Tags

Share

More Templates Like This

About

Tags

Share

About

Tags

Share

More Templates Like This