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;