41 lines
974 B
TypeScript
41 lines
974 B
TypeScript
import React, { FC } from 'react'
|
|
import { makeStyles } from '@material-ui/styles'
|
|
import { Typography, Container, Theme } from '@material-ui/core'
|
|
|
|
const useStyles = makeStyles((theme: Theme) => ({
|
|
heroContent: {
|
|
backgroundColor: theme.palette.background.paper,
|
|
padding: theme.spacing(8, 0, 6),
|
|
},
|
|
}))
|
|
|
|
export interface HeroProps {
|
|
title: string
|
|
description?: string
|
|
}
|
|
|
|
const Hero: FC<HeroProps> = ({ title, description = '', children }) => {
|
|
const classes = useStyles()
|
|
return (
|
|
<div className={classes.heroContent}>
|
|
<Container maxWidth="md">
|
|
<Typography
|
|
component="h1"
|
|
variant="h2"
|
|
align="center"
|
|
color="textPrimary"
|
|
gutterBottom
|
|
>
|
|
{title}
|
|
</Typography>
|
|
<Typography variant="h5" align="center" color="textSecondary" paragraph>
|
|
{description}
|
|
</Typography>
|
|
{children}
|
|
</Container>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default Hero
|