1import {makeStyles} from '@material-ui/core/styles';
 2import Container from '@material-ui/core/Container';
 3import DefaultLayout from './Default';
 4import useBannerStore from '../stores/useBannerStore';
 5
 6const CenteredLayout = ({children, ...props}) => {
 7  const bannerHeight = useBannerStore(s => s.height);
 8  const bannerOffset = useBannerStore(s => s.offset);
 9  const classes = useStyles({bannerHeight, bannerOffset});
10
11  return (
12    <DefaultLayout className={classes.layout} {...props}>
13      <Container maxWidth="sm">{children}</Container>
14    </DefaultLayout>
15  );
16};
17
18const useStyles = makeStyles(theme => ({
19  layout: ({bannerHeight, bannerOffset}) => ({
20    minHeight: `calc(100vh - ${bannerHeight})`,
21    paddingTop:
22      theme.mixins.toolbar.minHeight * 2 + bannerOffset,
23    display: 'flex',
24    alignItems: 'center',
25    justifyContent: 'center',
26  }),
27}));
28
29export default CenteredLayout;