text: import React from "react"
  import { graphql, useStaticQuery } from "gatsby"
  import img from "../images/image-1.jpg"
  import Image from "gatsby-image"
  
  const getImages = graphql`
    {
      fixed: file(relativePath: { eq: "image-1.jpg" }) {
        childImageSharp {
          fixed(width: 200, grayscale: true) {
            ...GatsbyImageSharpFixed
          }
        }
      }
      fluid: file(relativePath: { eq: "image-2.jpg" }) {
        childImageSharp {
          fluid {
            ...GatsbyImageSharpFluid_withWebp_tracedSVG
  
          }
        }
      }
      example: file(relativePath: { eq: "image-3.jpg"}) {
        childImageSharp {
          fluid(maxWidth: 100) {
            ...GatsbyImageSharpFluid_withWebp_tracedSVG
          }
        }
      }
    }
  `
  
  const Images = () => {
    const data = useStaticQuery(getImages)
    // console.log(data)
    return (
      <section className="images">
        <article className="single-image">
          <h3> basic image</h3>
          <img src={img} width="100%" alt="sofa"/>
          <h2>Content</h2>
        </article>
        <article className="single-image">
          <h3>fixed image/blur</h3>
          <Image fixed={data.fixed.childImageSharp.fixed} />
          <h2>Content</h2>
        </article>
        <article className="single-image">
          <h3> fluid image/svg</h3>
          <Image fluid={data.fluid.childImageSharp.fluid} />
          <h2>Content</h2>
  
          <div className="small">
            <Image fluid={data.fluid.childImageSharp.fluid} />
          </div>
          <Image fluid={data.example.childImageSharp.fluid} />
        </article>
      </section>
    )
  }
  
  export default Images
  