frontend/containers/TravelColumns/NoCar.tsx (view raw)
1import Typography from '@material-ui/core/Typography';
2import Box from '@material-ui/core/Box';
3import {makeStyles} from '@material-ui/core/styles';
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 classes = useStyles({image});
17 const {t} = useTranslation();
18
19 return (
20 <Box className={classes.noTravel}>
21 <Typography variant="h5">{title}</Typography>
22 <img className={classes.noTravelImage} src="/assets/car.png" />
23 <Typography>{t('event.no_travel.desc')}</Typography>
24 <ShareEvent
25 color="primary"
26 className={classes.share}
27 title={`Caroster ${eventName}`}
28 url={`${url}`}
29 />
30 </Box>
31 );
32};
33
34const useStyles = makeStyles(theme => ({
35 noTravel: ({image}) => ({
36 margin: `${theme.spacing(4)}px auto`,
37 marginTop: image ? 0 : theme.spacing(8),
38 width: '280px',
39 maxWidth: '100%',
40 paddingBottom: theme.spacing(16),
41 textAlign: 'center',
42 }),
43 noTravelImage: ({image}) => ({
44 width: image ? '100%' : 0,
45 height: image ? 'auto' : theme.spacing(6),
46 [theme.breakpoints.down('sm')]: {
47 width: image ? '50%' : 0,
48 },
49 }),
50 share: {
51 marginTop: theme.spacing(6),
52 backgroundColor: '#fff',
53 },
54}));
55
56export default NoCar;