{"size": 1809, "ext": "js", "max_stars_repo_path": "src/components/Header.js", "max_stars_repo_name": "maciejkopecpl/cms-ui", "max_stars_repo_stars_event_min_datetime": null, "max_stars_repo_stars_event_max_datetime": null, "max_issues_repo_path": "src/components/Header.js", "max_issues_repo_name": "maciejkopecpl/cms-ui", "max_issues_repo_issues_event_min_datetime": "2021-09-24T21:07:05.000Z", "max_issues_repo_issues_event_max_datetime": "2021-09-25T03:04:37.000Z", "max_forks_repo_path": "src/components/Header.js", "max_forks_repo_name": "maciejkopecpl/cms-ui", "max_forks_repo_forks_event_min_datetime": null, "max_forks_repo_forks_event_max_datetime": null}
{"max_stars_count": null, "max_issues_count": 2, "max_forks_count": null, "avg_line_length": 26.6029411765, "max_line_length": 68, "alphanum_fraction": 0.5887230514}
import Grid from "@material-ui/core/Grid";
import { makeStyles } from "@material-ui/core/styles";
import Typography from "@material-ui/core/Typography";
import PropTypes from "prop-types";
import * as React from "react";
import { Parallax } from "react-parallax";
import { useImageSharp } from "../utils/useImageSharp";
import { useIsMobile } from "../utils/useIsMobile";

const useStyles = makeStyles(theme => ({
  header: {
    color: theme.palette.common.white,
  },
  overlay: {
    backgroundColor: "rgba(0,0,0,.3)",
  },
}));

export default function Header(props) {
  const classes = useStyles();
  const { title, subTitle, imageId } = props;

  const image = useImageSharp(imageId);
  const isMobile = useIsMobile();

  return (
    <Parallax
      strength={200}
      bgImage={image?.srcWebp}
      bgImageSrcSet={image?.srcSetWebp}
      bgImageSizes={image?.sizes}
      contentClassName={classes.overlay}
      bgImageStyle={{ marginTop: isMobile ? -100 : -200 }}
    >
      <Grid
        container
        justifyContent="center"
        alignItems="center"
        style={{ height: "53em" }}
        className={classes.header}
      >
        <Grid item md={8}>
          <div style={{ position: "relative" }}>
            <Typography
              component="h2"
              variant="h2"
              color="inherit"
              gutterBottom={true}
              style={{ fontWeight: 400 }}
            >
              {title}
            </Typography>
            <Typography component="h1" variant="h4" color="inherit">
              {subTitle}
            </Typography>
          </div>
        </Grid>
      </Grid>
    </Parallax>
  );
}

Header.propTypes = {
  title: PropTypes.string.isRequired,
  subTitle: PropTypes.string.isRequired,
  imageId: PropTypes.string.isRequired,
};
