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';
6import SupportCaroster from '../SupportCaroster';
7
8interface Props {
9 eventName: string;
10 title: string;
11 showImage?: boolean;
12}
13
14const NoCar = ({eventName, title, showImage}: Props) => {
15 const {t} = useTranslation();
16 const theme = useTheme();
17
18 return (
19 <Box
20 my={4}
21 mx="auto"
22 pb={16}
23 mt={showImage ? 0 : 8}
24 maxWidth="100%"
25 width={340}
26 >
27 <Typography variant="h6" align="center" color="textSecondary">
28 {title}
29 </Typography>
30 {showImage && (
31 <Box
32 component="img"
33 sx={{
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 {t('event.no_travel.desc')}
46 </Typography>
47 <ShareEvent
48 color="primary"
49 sx={{
50 mt: 4,
51 backgroundColor: '#fff',
52 }}
53 title={`Caroster ${eventName}`}
54 />
55 <Box mt={4} display="flex" justifyContent="center">
56 <SupportCaroster />
57 </Box>
58 </Box>
59 );
60};
61
62export default NoCar;