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 Copylink from '../../components/CopyLink';
 6import useToastStore from '../../stores/useToastStore';
 7
 8interface Props {
 9  eventName: string;
10  title: string;
11  image?: boolean;
12}
13
14const url = typeof window !== 'undefined' ? window.location.href : '';
15
16const NoCar = ({eventName, title, image}: Props) => {
17  const classes = useStyles({image});
18  const {t} = useTranslation();
19  const addToast = useToastStore(s => s.addToast);
20
21  return (
22    <Box className={classes.noTravel}>
23      <Typography variant="h5">{title}</Typography>
24      <img className={classes.noTravelImage} src="/assets/car.png" />
25      <Typography>{t('event.no_travel.desc')}</Typography>
26      <Copylink
27        color="primary"
28        className={classes.share}
29        buttonText={t('event.fields.share')}
30        title={`Caroster ${eventName}`}
31        url={`${url}`}
32        onShare={() => addToast(t('event.actions.copied'))}
33      />
34    </Box>
35  );
36};
37
38const useStyles = makeStyles(theme => ({
39  noTravel: ({image}) => ({
40    margin: `${theme.spacing(4)}px auto`,
41    marginTop: image ? 0 : theme.spacing(8),
42    width: '280px',
43    maxWidth: '100%',
44    paddingBottom: theme.spacing(16),
45    textAlign: 'center',
46  }),
47  noTravelImage: ({image}) => ({
48    width: image ? '100%' : 0,
49    height: image ? 'auto' : theme.spacing(6),
50    [theme.breakpoints.down('sm')]: {
51      width: image ? '50%' : 0,
52    },
53  }),
54  share: {
55    marginTop: theme.spacing(6),
56    backgroundColor: '#fff',
57  },
58}));
59
60export default NoCar;