{"size": 2465, "ext": "js", "max_stars_repo_path": "src/components/works.js", "max_stars_repo_name": "adrianfuzi/erda_wood", "max_stars_repo_stars_event_min_datetime": null, "max_stars_repo_stars_event_max_datetime": null, "max_issues_repo_path": "src/components/works.js", "max_issues_repo_name": "adrianfuzi/erda_wood", "max_issues_repo_issues_event_min_datetime": null, "max_issues_repo_issues_event_max_datetime": null, "max_forks_repo_path": "src/components/works.js", "max_forks_repo_name": "adrianfuzi/erda_wood", "max_forks_repo_forks_event_min_datetime": null, "max_forks_repo_forks_event_max_datetime": null}
{"max_stars_count": null, "max_issues_count": null, "max_forks_count": null, "avg_line_length": 30.0609756098, "max_line_length": 80, "alphanum_fraction": 0.552535497}
import React from "react"
import { graphql, useStaticQuery } from "gatsby"
import Img from "gatsby-image"

import arrow from "../images/arrow.svg"

const Works = () => {
  const workImages = useStaticQuery(graphql`
    query {
      work1: file(relativePath: { eq: "coffee.jpg" }) {
        childImageSharp {
          fluid(maxWidth: 300) {
            ...GatsbyImageSharpFluid
          }
        }
      }
      work2: file(relativePath: { eq: "coffee2.jpg" }) {
        childImageSharp {
          fluid(maxWidth: 300) {
            ...GatsbyImageSharpFluid
          }
        }
      }
      work3: file(relativePath: { eq: "tray.jpg" }) {
        childImageSharp {
          fluid(maxWidth: 300) {
            ...GatsbyImageSharpFluid
          }
        }
      }
    }
  `)

  return (
    <section className="works">
      <h1 className="works__title" id="nav-works">
        termékek
      </h1>
      <div className="works__box">
        <div className="works__box--card">
          <Img
            className="works__box--card-img"
            fluid={workImages.work1.childImageSharp.fluid}
          />
          <h2 className="works__box--card-title">
            Vörösfenyő kávékapszula tartó
          </h2>
          <h3 className="works__box--card-price">9 000 HUF</h3>
          <button className="works__box--card-btn">Kattints a termékhez</button>
        </div>
        <div className="works__box--card">
          <Img
            className="works__box--card-img"
            fluid={workImages.work2.childImageSharp.fluid}
          />
          <h2 className="works__box--card-title">
            Barnatölgy kávékapszula tartó
          </h2>
          <h3 className="works__box--card-price">10 000 HUF</h3>
          <button className="works__box--card-btn">Kattints a termékhez</button>
        </div>
        <div className="works__box--card">
          <Img
            className="works__box--card-img"
            fluid={workImages.work3.childImageSharp.fluid}
          />
          <h2 className="works__box--card-title">Csíkos tálca</h2>
          <h3 className="works__box--card-price">12 000 HUF</h3>
          <button className="works__box--card-btn">Kattints a termékhez</button>
        </div>
      </div>
      <button className="works__btn">
        Tovább{" "}
        <span>
          <img alt="" src={arrow} className="works__btn--arrow arrow" />
        </span>
      </button>
    </section>
  )
}

export default Works