"use client" import { useState } from "react" import { ChefHat, Sparkles } from 'lucide-react' export default function RecipeGeneratorPage() { const [ingredients, setIngredients] = useState("") const [dietary, setDietary] = useState("") const [recipe, setRecipe] = useState("") const [isLoading, setIsLoading] = useState(false) const handleGenerate = async () => { if (!ingredients.trim()) return setIsLoading(true) setRecipe("") try { const response = await fetch("/api/recipe", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ ingredients, dietary }), }) if (!response.body) return const reader = response.body.getReader() const decoder = new TextDecoder() while (true) { const { done, value } = await reader.read() if (done) break const text = decoder.decode(value) setRecipe((prev) => prev + text) } } finally { setIsLoading(false) } } return (

AI Recipe Generator

Create delicious recipes from your ingredients

Available Ingredients setIngredients(e.target.value)} placeholder="e.g., chicken, tomatoes, pasta, garlic..." className="w-full bg-slate-800/50 border border-slate-700 rounded-xl px-4 py-3 text-slate-200 placeholder:text-slate-500 focus:outline-none focus:ring-2 focus:ring-orange-500/50" />

Dietary Preferences (Optional) setDietary(e.target.value)} placeholder="e.g., vegetarian, gluten-free, low-carb..." className="w-full bg-slate-800/50 border border-slate-700 rounded-xl px-4 py-3 text-slate-200 placeholder:text-slate-500 focus:outline-none focus:ring-2 focus:ring-orange-500/50" />

{recipe && (

Your Custom Recipe

{recipe}

)}

) }