1import pageUtils from '../../lib/pageUtils';
 2import Layout from '../../layouts/EventCreation';
 3import {useTranslation} from 'next-i18next';
 4import {Box, Typography, useMediaQuery, useTheme} from '@mui/material';
 5import EventTypeCard from '../../containers/EventTypeCard';
 6import {useEffect} from 'react';
 7import {useRouter} from 'next/router';
 8import useEventCreationStore from '../../stores/useEventCreationStore';
 9
10const NewEventType = () => {
11  const {t} = useTranslation();
12  const router = useRouter();
13  const theme = useTheme();
14  const isMobile = useMediaQuery(theme.breakpoints.down('md'));
15  const event = useEventCreationStore(s => s.event);
16  const eventStoreReady = useEventCreationStore(s => s.ready);
17
18  useEffect(() => {
19    if (eventStoreReady && !event.name) router.push('/new');
20  }, [event.name, eventStoreReady, router]);
21
22  return (
23    <Layout>
24      <Box display="flex" justifyContent="center">
25        <Typography
26          variant="h3"
27          align="center"
28          maxWidth={400}
29        >{t`event.creation.chooseType`}</Typography>
30      </Box>
31      <Box display="flex" gap={4} py={4} flexWrap={isMobile && 'wrap'}>
32        <EventTypeCard type="basic" />
33        <EventTypeCard type="plus" />
34      </Box>
35    </Layout>
36  );
37};
38
39export const getServerSideProps = pageUtils.getServerSideProps();
40
41export default NewEventType;