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: theme.mixins.toolbar.minHeight + bannerOffset - bannerHeight,
22    display: 'flex',
23    alignItems: 'center',
24    justifyContent: 'center',
25  }),
26}));
27
28export default CenteredLayout;