{"size": 1272, "ext": "js", "max_stars_repo_path": "src/components/blog/post-hero-block.js", "max_stars_repo_name": "Hyperobjekt/covid-19-behind-bars", "max_stars_repo_stars_event_min_datetime": "2020-07-30T18:04:22.000Z", "max_stars_repo_stars_event_max_datetime": "2020-07-30T18:04:22.000Z", "max_issues_repo_path": "src/components/blog/post-hero-block.js", "max_issues_repo_name": "Hyperobjekt/covid-19-behind-bars", "max_issues_repo_issues_event_min_datetime": "2020-10-29T17:05:24.000Z", "max_issues_repo_issues_event_max_datetime": "2022-03-22T20:15:35.000Z", "max_forks_repo_path": "src/components/blog/post-hero-block.js", "max_forks_repo_name": "Hyperobjekt/covid-19-behind-bars", "max_forks_repo_forks_event_min_datetime": "2020-12-10T22:22:43.000Z", "max_forks_repo_forks_event_max_datetime": "2020-12-10T22:22:43.000Z"}
{"max_stars_count": 1, "max_issues_count": 244, "max_forks_count": 1, "avg_line_length": 27.0638297872, "max_line_length": 78, "alphanum_fraction": 0.6273584906}
import React from "react";
import Block from "gatsby-theme-hypersite/src/main/block";
import { Typography, withStyles } from "@material-ui/core";
import { compactTitleTypography } from "../../gatsby-theme-hypercore/theme";
import PostMeta from "./post-meta";

const styles = (theme) => ({
  hero: {
    [theme.breakpoints.up("md")]: {
      paddingRight: theme.columnSpacing(2),
    },
  },
  date: {
    fontSize: theme.typography.pxToRem(14),
  },
  postTitle: {
    ...compactTitleTypography,
    color: theme.palette.text.secondary,
    lineHeight: 1.05,
    margin: 0,
    marginTop: theme.spacing(2),
    paddingBottom: theme.spacing(5),
    fontSize: theme.typography.pxToRem(55),
    [theme.breakpoints.up("sm")]: {
      fontSize: theme.typography.pxToRem(70),
    },
    [theme.breakpoints.up("md")]: {
      fontSize: theme.typography.pxToRem(85),
    },
  },
});

const PostHeroBlock = ({ classes, author, date, title, ...props }) => {
  return (
    <Block>
      <div className={classes.hero} {...props}>
        <PostMeta author={author} date={date} />
        <Typography variant="h2" component="h2" className={classes.postTitle}>
          {title}
        </Typography>
      </div>
    </Block>
  );
};

export default withStyles(styles)(PostHeroBlock);
