Culinária

import React, { useState, useMemo } from "react"; // Culinary single-file React component (Tailwind CSS required in host app) // Usage: place this component in a React app that has Tailwind configured. export default function CulinarySite() { const [query, setQuery] = useState(""); const [activeCategory, setActiveCategory] = useState("Tudo"); const [selected, setSelected] = useState(null); // Sample data — replace or extend with your own recipes or API const recipes = [ { id: 1, title: "Moqueca de Peixe", category: "Peixes", time: "45 min", difficulty: "Médio", image: "https://picsum.photos/seed/moqueca/800/600", ingredients: [ "1 kg de peixe em postas", "1 cebola grande fatiada", "1 pimentão vermelho fatiado", "2 tomates maduros", "Leite de coco 200ml", "Azeite de dendê a gosto", "Coentro, sal e pimenta", ], steps: [ "Tempere o peixe e reserve.", "Refogue cebola, pimentão e tomate até murchar.", "Adicione o peixe, o leite de coco e cozinhe por 20 minutos.", "Finalize com azeite de dendê e coentro.", ], }, { id: 2, title: "Brigadeiro Gourmet", category: "Doces", time: "20 min", difficulty: "Fácil", image: "https://picsum.photos/seed/brigadeiro/800/600", ingredients: ["1 lata de leite condensado", "1 colher de manteiga", "3 colheres de chocolate em pó"], steps: [ "Leve tudo ao fogo baixo mexendo sempre até desgrudar da panela.", "Despeje em um prato untado e deixe esfriar antes de enrolar.", ], }, { id: 3, title: "Risoto de Cogumelos", category: "Vegetariano", time: "35 min", difficulty: "Médio", image: "https://picsum.photos/seed/risoto/800/600", ingredients: ["Arroz arbóreo", "Caldo de legumes", "Cogumelos frescos", "Parmesão"], steps: [ "Refogue os cogumelos e reserve.", "Cozinhe o arroz acrescentando caldo aos poucos até ficar cremoso.", "Misture os cogumelos e finalize com parmesão.", ], }, ]; const categories = useMemo(() => ["Tudo", ...Array.from(new Set(recipes.map((r) => r.category)))], [recipes]); const filtered = recipes.filter((r) => { const q = query.trim().toLowerCase(); const matchesQuery = !q || r.title.toLowerCase().includes(q) || r.ingredients.join(" ").toLowerCase().includes(q); const matchesCategory = activeCategory === "Tudo" || r.category === activeCategory; return matchesQuery && matchesCategory; }); return (

Cozinha & Sabor

Início Receitas Sobre Contato

Encontre receitas deliciosas

Pesquise por ingrediente, título ou categoria.

setQuery(e.target.value)} placeholder="Buscar: ex. frango, chocolate, risoto..." className="flex-1 border rounded-lg px-4 py-3 focus:outline-none focus:ring-2 focus:ring-amber-300" />

Categorias

{categories.map((c) => ( ))}

{filtered.map((r) => (

setSelected(r)}>

{r.title}

{r.category} {r.time}

Dificuldade: {r.difficulty}

))} {filtered.length === 0 && (

Nenhuma receita encontrada

Tente outra busca ou remova filtros.

)}

Receita em destaque

Escolha uma receita para ver passo a passo, ingredientes e dicas.

{/* Modal / Details */} {selected && (

setSelected(null)} />

{selected.title}

{selected.time} • {selected.difficulty}

Ingredientes

{selected.ingredients.map((it, idx) => (
• {it}
))}

Modo de preparo

{selected.steps.map((st, idx) => (
1. {st}
))}

)}

© {new Date().getFullYear()} Cozinha & Sabor — Feito com carinho.

); }