Untitled
unknown
plain_text
7 months ago
1.6 kB
1
Indexable
Never
import Searchbar from "./components/Searchbar"; import Button from "./components/Button"; import logga from "./assets/Bilder/WWM_logga.png"; import Card from "./components/Card"; import { useState } from "react"; import searchRecipes from "./API/recipe/searchRecipes"; import "./App.css"; import Navbar from "./components/Navbar/Navbar"; export function App() { const [query, setQuery] = useState({ query: "chicken", number: 6 }); const [recipes, setRecipes] = useState(null); const fetchRecipes = async (query) => { try { const data = await searchRecipes(query); setRecipes(data); } catch (error) { console.error(error); } }; if (!recipes) { fetchRecipes(query); return <div>Loading...</div>; } const categories = ["Meat", "Fish", "Shellfish", "Vegetarian"]; return ( <div className="App"> <Navbar></Navbar> {/* <Navbar /> */} <img className="loggan" src={logga} alt="Logga" /> <Searchbar query={query} setQuery={setQuery} fetchRecipes={fetchRecipes} /> {categories.map((category) => ( <Button key={category} label={category} /> ))} <section className="container-recipe"> {recipes.results.map((recipe) => ( <Card key={recipe.id} id={recipe.id} image={recipe.image} text={recipe.title} /> ))} </section> </div> ); } export default App;