{"size": 1381, "ext": "js", "max_stars_repo_path": "src/components/HotelImage.js", "max_stars_repo_name": "Mattee37/hotel-gatsby", "max_stars_repo_stars_event_min_datetime": null, "max_stars_repo_stars_event_max_datetime": null, "max_issues_repo_path": "src/components/HotelImage.js", "max_issues_repo_name": "Mattee37/hotel-gatsby", "max_issues_repo_issues_event_min_datetime": null, "max_issues_repo_issues_event_max_datetime": null, "max_forks_repo_path": "src/components/HotelImage.js", "max_forks_repo_name": "Mattee37/hotel-gatsby", "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": 19.4507042254, "max_line_length": 80, "alphanum_fraction": 0.5937726285}
import React from "react";
import { graphql, useStaticQuery } from "gatsby";
import BackgroundImage from "gatsby-background-image";
import styled from "@emotion/styled";

const Image = styled(BackgroundImage)`
  height: 700px;

  @media (max-width: 766px) {
    height: 500px;
  }
`;

const ImageText = styled.div`
  background-image: linear-gradient(
    to top,
    rgba(34, 49, 63, 0.8),
    rgba(34, 49, 63, 0.8)
  );
  color: #fff;
  height: 100%;
  display: flex;
  flex-direction: column;
  flex: 1;
  align-items: center;
  justify-content: center;

  h1 {
    font-size: 4rem;
    margin: 0%;

    @media (max-width: 766px) {
      font-size: 2.6rem;
    }
  }

  p {
    font-size: 2rem;

    @media (max-width: 766px) {
      font-size: 2rem;
    }
  }
`;

const HotelImage = () => {
  //hace la consulta al ContentManager mediante GraphQl, nos devuelve una imagen
  const { image } = useStaticQuery(graphql`
    query {
      image: file(relativePath: { eq: "1.jpg" }) {
        sharp: childImageSharp {
          fluid {
            ...GatsbyImageSharpFluid_withWebp
          }
        }
      }
    }
  `);

  return (
    <Image tag="section" fluid={image.sharp.fluid} faidId="soft">
      <ImageText>
        <h1>Bienvenido al Hotel Gatsby!</h1>
        <p>El mejor hotel para tus vacaciones</p>
      </ImageText>
    </Image>
  );
};

export default HotelImage;
