83 lines
2.1 KiB
JavaScript
83 lines
2.1 KiB
JavaScript
import React from "react";
|
|
import PropTypes from "prop-types";
|
|
import { makeStyles } from "@material-ui/core/styles";
|
|
import Paper from "@material-ui/core/Paper";
|
|
import Typography from "@material-ui/core/Typography";
|
|
import Grid from "@material-ui/core/Grid";
|
|
import Link from "@material-ui/core/Link";
|
|
|
|
const useStyles = makeStyles((theme) => ({
|
|
mainFeaturedPost: {
|
|
position: "relative",
|
|
backgroundColor: theme.palette.grey[800],
|
|
color: theme.palette.common.white,
|
|
marginBottom: theme.spacing(4),
|
|
backgroundImage: "img/banner.jpg",
|
|
backgroundSize: "cover",
|
|
backgroundRepeat: "no-repeat",
|
|
backgroundPosition: "center",
|
|
},
|
|
overlay: {
|
|
position: "absolute",
|
|
top: 0,
|
|
bottom: 0,
|
|
right: 0,
|
|
left: 0,
|
|
backgroundColor: "rgba(0,0,0,.3)",
|
|
},
|
|
mainFeaturedPostContent: {
|
|
position: "relative",
|
|
padding: theme.spacing(3),
|
|
[theme.breakpoints.up("md")]: {
|
|
padding: theme.spacing(6),
|
|
paddingRight: 0,
|
|
},
|
|
},
|
|
}));
|
|
|
|
export default function Banner(props) {
|
|
const classes = useStyles();
|
|
const { post } = props;
|
|
|
|
return (
|
|
<Paper
|
|
className={classes.mainFeaturedPost}
|
|
style={{ backgroundImage: `url(${post.image})` }}
|
|
>
|
|
{/* Increase the priority of the hero background image */}
|
|
{
|
|
<img
|
|
style={{ display: "none" }}
|
|
src={post.image}
|
|
alt={post.imageText}
|
|
/>
|
|
}
|
|
<div className={classes.overlay} />
|
|
<Grid container>
|
|
<Grid item md={6}>
|
|
<div className={classes.mainFeaturedPostContent}>
|
|
<Typography
|
|
component="h1"
|
|
variant="h3"
|
|
color="inherit"
|
|
gutterBottom
|
|
>
|
|
{post.title}
|
|
</Typography>
|
|
<Typography variant="h5" color="inherit" paragraph>
|
|
{post.description}
|
|
</Typography>
|
|
<Link variant="subtitle1" href="#">
|
|
{post.linkText}
|
|
</Link>
|
|
</div>
|
|
</Grid>
|
|
</Grid>
|
|
</Paper>
|
|
);
|
|
}
|
|
|
|
Banner.propTypes = {
|
|
post: PropTypes.object,
|
|
};
|