frontend/containers/TravelColumns/NoCar.tsx (view raw)
1import Typography from '@mui/material/Typography';
2import {useTheme} from '@mui/material/styles';
3import Box from '@mui/material/Box';
4import {useTranslation} from 'react-i18next';
5import ShareEvent from '../ShareEvent';
6
7interface Props {
8 eventName: string;
9 title: string;
10 image?: boolean;
11}
12
13const url = typeof window !== 'undefined' ? window.location.href : '';
14
15const NoCar = ({eventName, title, image}: Props) => {
16 const {t} = useTranslation();
17 const theme = useTheme();
18
19 return (
20 <Box
21 sx={{
22 margin: `${theme.spacing(4)} auto`,
23 marginTop: image ? 0 : theme.spacing(8),
24 width: '280px',
25 maxWidth: '100%',
26 paddingBottom: theme.spacing(16),
27 textAlign: 'center',
28 }}
29 >
30 <Typography variant="h5">{title}</Typography>
31 <Box
32 component="img"
33 sx={{
34 width: image ? '100%' : 0,
35 height: image ? 'auto' : theme.spacing(6),
36 [theme.breakpoints.down('md')]: {
37 width: image ? '50%' : 0,
38 },
39 }}
40 src="/assets/car.png"
41 />
42 <Typography>{t('event.no_travel.desc')}</Typography>
43 <ShareEvent
44 color="primary"
45 sx={{marginTop: theme.spacing(6), backgroundColor: '#fff'}}
46 title={`Caroster ${eventName}`}
47 />
48 </Box>
49 );
50};
51
52export default NoCar;