text: import React from "react"
  import RecipesList from "./RecipesList"
  import TagsList from "./TagsList"
  import { useStaticQuery, graphql } from "gatsby"
  
  const query = graphql`
    {
      allContentfulRecipe(sort: { fields: title, order: ASC }) {
        nodes {
          id
          title
          prepTime
          cookTime
          image {
            gatsbyImageData(placeholder: TRACED_SVG, layout: CONSTRAINED)
          }
          content {
            tags
          }
        }
      }
    }
  `
  
  const AllRecipes = () => {
    const data = useStaticQuery(query)
    const recipes = data.allContentfulRecipe.nodes
  
    return (
      <section className='recipes-container'>
        <TagsList recipes={recipes} />
        <RecipesList recipes={recipes} />
      </section>
    )
  }
  
  export default AllRecipes
  