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
|