Untitled

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;