frontend/containers/TravelColumns/NoCar.tsx (view raw)
1import Button from '@mui/material/Button';
2import Typography from '@mui/material/Typography';
3import {useTheme} from '@mui/material/styles';
4import {useTranslation} from 'react-i18next';
5import {useRouter} from 'next/router';
6import Box from '@mui/material/Box';
7import ShareEvent from '../ShareEvent';
8import SupportCaroster from '../SupportCaroster';
9
10interface Props {
11 eventName: string;
12 title: string;
13 isCarosterPlus: string;
14 showImage?: boolean;
15}
16
17const NoCar = ({eventName, title, isCarosterPlus, showImage}: Props) => {
18 const {t} = useTranslation();
19 const theme = useTheme();
20 const router = useRouter();
21 const {uuid} = router.query
22
23 return (
24 <Box my={4} mx="auto" pb={16} mt={9} maxWidth="100%" width={340}>
25 <Typography variant="h6" align="center" color="textSecondary">
26 {title}
27 </Typography>
28 {showImage && (
29 <Box
30 component="img"
31 sx={{
32 display: 'block',
33 margin: '0 auto',
34 width: '100%',
35 height: 'auto',
36
37 [theme.breakpoints.down('md')]: {
38 width: '50%',
39 },
40 }}
41 src="/assets/car.png"
42 />
43 )}
44 <Typography sx={{whiteSpace: 'pre-line', mt: 4}} color="textSecondary">
45 {isCarosterPlus
46 ? t('event.no_travel.plus.desc')
47 : t('event.no_travel.desc')}
48 </Typography>
49 {!isCarosterPlus && (
50 <ShareEvent
51 color="primary"
52 sx={{
53 mt: 4,
54 backgroundColor: '#fff',
55 }}
56 title={`Caroster ${eventName}`}
57 />
58 )}
59 {isCarosterPlus && (
60 <Box textAlign="center" width={1} mt={4}>
61 <Button
62 variant="outlined"
63 color="primary"
64 onClick={() => router.push(`/e/${uuid}/alerts`)}
65 >
66 {t('event.no_travel.plus.action')}
67 </Button>
68 </Box>
69 )}
70 <Box mt={4} display="flex" justifyContent="center">
71 <SupportCaroster />
72 </Box>
73 </Box>
74 );
75};
76
77export default NoCar;