frontend/smart-hut/src/components/Banner.js

83 lines
2.1 KiB
JavaScript
Raw Normal View History

2020-03-23 20:24:17 +00:00
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";
2020-03-23 20:24:17 +00:00
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,
},
2020-03-23 20:24:17 +00:00
},
}));
export default function Banner(props) {
2020-03-23 20:24:17 +00:00
const classes = useStyles();
const { post } = props;
2020-03-23 20:24:17 +00:00
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 = {
2020-03-23 20:24:17 +00:00
post: PropTypes.object,
};