import React, { useState } from "react";
const recipes = [
{
id: 1,
title: "Creamy Garlic Chicken",
category: "Dinner",
time: "30 mins",
ingredients: [
"2 chicken breasts",
"3 cloves garlic",
"1 cup heavy cream",
"1/2 cup parmesan",
"Salt & pepper",
"1 tbsp olive oil"
],
steps: [
"Season chicken with salt and pepper.",
"Sear chicken in olive oil until golden.",
"Add garlic and cook for 1 minute.",
"Pour in cream and parmesan, simmer 5–7 minutes.",
"Return chicken to pan and cook through.",
"Serve hot over pasta or rice."
]
},
{
id: 2,
title: "10-Minute Breakfast Wrap",
category: "Breakfast",
time: "10 mins",
ingredients: [
"2 eggs",
"1 tortilla",
"1/4 cup cheese",
"1/4 cup diced veggies",
"Salt & pepper"
],
steps: [
"Scramble eggs with salt and pepper.",
"Warm tortilla in pan.",
"Add eggs, cheese, and veggies.",
"Fold, toast lightly, and serve."
]
},
{
id: 3,
title: "No-Bake Oreo Dessert",
category: "Dessert",
time: "15 mins",
ingredients: [
"20 Oreo cookies",
"4 tbsp butter, melted",
"1 cup whipped cream",
"1/2 cup chocolate syrup"
],
steps: [
"Crush Oreos and mix with melted butter.",
"Press into a dish to form crust.",
"Spread whipped cream on top.",
"Drizzle chocolate syrup.",
"Chill 10 minutes before serving."
]
}
];
export default function RecipeWebsite() {
const [selectedRecipe, setSelectedRecipe] = useState(null);
const [search, setSearch] = useState("");
const filteredRecipes = recipes.filter((recipe) =>
recipe.title.toLowerCase().includes(search.toLowerCase())
);
return (
<div className="min-h-screen bg-gray-50 p-6">
<div className="max-w-5xl mx-auto">
<h1 className="text-4xl font-bold text-center mb-6">Simple & Easy Recipes</h1>
<input
type="text"
placeholder="Search recipes..."
className="w-full p-3 mb-6 border rounded-xl"
value={search}
onChange={(e) => setSearch(e.target.value)}
/>
{!selectedRecipe && (
<div className="grid md:grid-cols-3 gap-6">
{filteredRecipes.map((recipe) => (
<div
key={recipe.id}
onClick={() => setSelectedRecipe(recipe)}
className="cursor-pointer bg-white p-5 rounded-2xl shadow hover:shadow-lg transition"
>
<h2 className="text-xl font-semibold mb-2">{recipe.title}</h2>
<p className="text-sm text-gray-500">{recipe.category}</p>
<p className="text-sm">⏱ {recipe.time}</p>
</div>
))}
</div>
)}
{selectedRecipe && (
<div className="bg-white p-6 rounded-2xl shadow">
<button
onClick={() => setSelectedRecipe(null)}
className="mb-4 text-blue-500 underline"
>
← Back to recipes
</button>
<h2 className="text-3xl font-bold mb-2">{selectedRecipe.title}</h2>
<p className="text-gray-500 mb-4">
{selectedRecipe.category} • {selectedRecipe.time}
</p>
<h3 className="text-xl font-semibold mb-2">Ingredients</h3>
<ul className="list-disc ml-6 mb-4">
{selectedRecipe.ingredients.map((item, idx) => (
<li key={idx}>{item}</li>
))}
</ul>
<h3 className="text-xl font-semibold mb-2">Steps</h3>
<ol className="list-decimal ml-6">
{selectedRecipe.steps.map((step, idx) => (
<li key={idx} className="mb-2">{step}</li>
))}
</ol>
</div>
)}
</div>
</div>
);
}
import React, { useState } from "react";
const recipes = [
{ id: 1, title: "Creamy Garlic Chicken", category: "Dinner", time: "30 mins", ingredients: ["2 chicken breasts","3 cloves garlic","1 cup heavy cream","1/2 cup parmesan","Salt & pepper","1 tbsp olive oil"], steps: ["Season chicken.","Sear in olive oil.","Add garlic.","Stir in cream and parmesan.","Simmer and return chicken.","Serve hot."] },
{ id: 2, title: "10-Minute Breakfast Wrap", category: "Breakfast", time: "10 mins", ingredients: ["2 eggs","1 tortilla","1/4 cup cheese","Veggies","Salt & pepper"], steps: ["Scramble eggs.","Warm tortilla.","Add fillings.","Fold and toast."] },
{ id: 3, title: "No-Bake Oreo Dessert", category: "Dessert", time: "15 mins", ingredients: ["Oreos","Butter","Whipped cream","Chocolate syrup"], steps: ["Crush Oreos.","Mix with butter.","Press crust.","Top and chill."] },
{ id: 4, title: "Classic Spaghetti", category: "Dinner", time: "25 mins", ingredients: ["Spaghetti","Ground beef","Tomato sauce","Onion","Garlic"], steps: ["Boil pasta.","Cook beef with onion and garlic.","Add sauce.","Combine and serve."] },
{ id: 5, title: "Grilled Cheese Sandwich", category: "Lunch", time: "8 mins", ingredients: ["Bread slices","Cheese","Butter"], steps: ["Butter bread.","Add cheese.","Grill until golden."] },
{ id: 6, title: "Chicken Stir Fry", category: "Dinner", time: "20 mins", ingredients: ["Chicken","Mixed veggies","Soy sauce","Garlic"], steps: ["Cook chicken.","Add veggies.","Stir in soy sauce and garlic."] },
{ id: 7, title: "Pancakes", category: "Breakfast", time: "15 mins", ingredients: ["Flour","Milk","Egg","Sugar","Baking powder"], steps: ["Mix ingredients.","Pour batter.","Flip when bubbly."] },
{ id: 8, title: "Tuna Salad", category: "Lunch", time: "5 mins", ingredients: ["Tuna","Mayo","Celery","Salt & pepper"], steps: ["Mix all ingredients.","Serve chilled."] },
{ id: 9, title: "Beef Tacos", category: "Dinner", time: "20 mins", ingredients: ["Ground beef","Taco shells","Lettuce","Cheese","Salsa"], steps: ["Cook beef with seasoning.","Fill shells.","Add toppings."] },
{ id: 10, title: "Fruit Smoothie", category: "Drink", time: "5 mins", ingredients: ["Mixed fruit","Yogurt","Honey","Ice"], steps: ["Blend all ingredients.","Serve cold."] },
{ id: 11, title: "Garlic Butter Shrimp", category: "Dinner", time: "15 mins", ingredients: ["Shrimp","Butter","Garlic","Lemon"], steps: ["Melt butter.","Cook garlic and shrimp.","Add lemon."] },
{ id: 12, title: "Egg Fried Rice", category: "Lunch", time: "15 mins", ingredients: ["Cooked rice","Eggs","Soy sauce","Veggies"], steps: ["Scramble eggs.","Add rice and veggies.","Stir in soy sauce."] },
{ id: 13, title: "Chocolate Mug Cake", category: "Dessert", time: "3 mins", ingredients: ["Flour","Cocoa","Sugar","Milk","Oil"], steps: ["Mix in mug.","Microwave 90 seconds."] },
{ id: 14, title: "Caesar Salad", category: "Lunch", time: "10 mins", ingredients: ["Romaine","Croutons","Parmesan","Caesar dressing"], steps: ["Toss ingredients.","Serve fresh."] },
{ id: 15, title: "Baked Salmon", category: "Dinner", time: "18 mins", ingredients: ["Salmon","Olive oil","Lemon","Salt & pepper"], steps: ["Season salmon.","Bake at 400°F for 15–18 mins."] },
{ id: 16, title: "French Toast", category: "Breakfast", time: "12 mins", ingredients: ["Bread","Eggs","Milk","Cinnamon"], steps: ["Dip bread.","Cook on skillet."] },
{ id: 17, title: "Loaded Nachos", category: "Snack", time: "10 mins", ingredients: ["Tortilla chips","Cheese","Beans","Salsa"], steps: ["Layer chips and toppings.","Bake until cheese melts."] },
{ id: 18, title: "Tomato Soup", category: "Lunch", time: "20 mins", ingredients: ["Tomatoes","Onion","Garlic","Broth"], steps: ["Cook ingredients.","Blend smooth."] },
{ id: 19, title: "BBQ Chicken Sliders", category: "Dinner", time: "25 mins", ingredients: ["Chicken","BBQ sauce","Slider buns"], steps: ["Cook chicken.","Mix with sauce.","Serve on buns."] },
{ id: 20, title: "Banana Oat Cookies", category: "Dessert", time: "15 mins", ingredients: ["Bananas","Oats","Chocolate chips"], steps: ["Mash bananas.","Mix oats and chips.","Bake 12 mins at 350°F."] }
];
export default function RecipeWebsite() {
const [selectedRecipe, setSelectedRecipe] = useState(null);
const [search, setSearch] = useState("");
const filteredRecipes = recipes.filter((recipe) =>
recipe.title.toLowerCase().includes(search.toLowerCase())
);
return (
<div className="min-h-screen bg-gray-50 p-6">
<div className="max-w-5xl mx-auto">
<h1 className="text-4xl font-bold text-center mb-6">Simple & Easy Recipes</h1>
<input
type="text"
placeholder="Search recipes..."
className="w-full p-3 mb-6 border rounded-xl"
value={search}
onChange={(e) => setSearch(e.target.value)}
/>
{!selectedRecipe && (
<div className="grid md:grid-cols-3 gap-6">
{filteredRecipes.map((recipe) => (
<div
key={recipe.id}
onClick={() => setSelectedRecipe(recipe)}
className="cursor-pointer bg-white p-5 rounded-2xl shadow hover:shadow-lg transition"
>
<h2 className="text-xl font-semibold mb-2">{recipe.title}</h2>
<p className="text-sm text-gray-500">{recipe.category}</p>
<p className="text-sm">⏱ {recipe.time}</p>
</div>
))}
</div>
)}
{selectedRecipe && (
<div className="bg-white p-6 rounded-2xl shadow">
<button
onClick={() => setSelectedRecipe(null)}
className="mb-4 text-blue-500 underline"
>
← Back to recipes
</button>
<h2 className="text-3xl font-bold mb-2">{selectedRecipe.title}</h2>
<p className="text-gray-500 mb-4">
{selectedRecipe.category} • {selectedRecipe.time}
</p>
<h3 className="text-xl font-semibold mb-2">Ingredients</h3>
<ul className="list-disc ml-6 mb-4">
{selectedRecipe.ingredients.map((item, idx) => (
<li key={idx}>{item}</li>
))}
</ul>
<h3 className="text-xl font-semibold mb-2">Steps</h3>
<ol className="list-decimal ml-6">
{selectedRecipe.steps.map((step, idx) => (
<li key={idx} className="mb-2">{step}</li>
))}
</ol>
</div>
)}
</div>
</div>
);
}