all repos — caroster @ v8.1

[Octree] Group carpool to your event https://caroster.io

frontend/containers/EventTypeCard/index.tsx (view raw)

 1import {Box, Paper, Typography} from '@mui/material';
 2import {useTranslation} from 'next-i18next';
 3import BasicAction from './BasicAction';
 4import PlusAction from './PlusAction';
 5import {Module, useModuleQuery} from '../../generated/graphql';
 6
 7type Props = {
 8  type: 'basic' | 'plus';
 9};
10
11const EventTypeCard = (props: Props) => {
12  const {type} = props;
13  const {t} = useTranslation();
14  const {data} = useModuleQuery({variables: {locale: 'en'}});
15  const modulesSettings = data?.module.data?.attributes;
16
17  return (
18    <Box
19      component={Paper}
20      p={2}
21      width={1}
22      display="flex"
23      flexDirection="column"
24      justifyContent="space-between"
25    >
26      <Typography color="primary" variant="h5">
27        {t(`event.creation.${type}.title`)}
28      </Typography>
29      <Typography color="textSecondary">
30        {t(`event.creation.${type}.subtitle`)}
31      </Typography>
32      {type === 'basic' && (
33        <Box display="flex" alignItems="baseline" pt={3.75} pb={2}>
34          <Typography fontSize={64} lineHeight={1}>
35            0
36          </Typography>
37          <Typography fontSize={24} lineHeight={1}>
38            
39          </Typography>
40        </Box>
41      )}
42      {type === 'plus' && (
43        <Box py={2}>
44          <Typography fontSize={14} lineHeight={1}>
45            {t`event.creation.plus.fromPrice`}
46          </Typography>
47          <Box display="flex" alignItems="baseline">
48            <Typography fontSize={64} lineHeight={1}>
49              {modulesSettings?.caroster_plus_price}
50            </Typography>
51            <Typography fontSize={24} lineHeight={1}>
52              
53            </Typography>
54          </Box>
55        </Box>
56      )}
57      <Typography color="textSecondary" pb={3}>
58        {t(`event.creation.${type}.description`)}
59      </Typography>
60      {type === 'basic' && <BasicAction />}
61      {type === 'plus' && <PlusAction />}
62    </Box>
63  );
64};
65
66export default EventTypeCard;