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 NoCar = ({eventName, title, image}: Props) => {
15  const classes = useStyles({image});
16  const {t} = useTranslation();
17  const addToast = useToastStore(s => s.addToast);
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      <Copylink
25        color="primary"
26        className={classes.share}
27        buttonText={t('event.fields.share')}
28        title={`Caroster ${eventName}`}
29        url={`${window.location.href}`}
30        onShare={() => addToast(t('event.actions.copied'))}
31      />
32    </Box>
33  );
34};
35
36const useStyles = makeStyles(theme => ({
37  noTravel: ({image}) => ({
38    margin: `${theme.spacing(4)}px auto`,
39    marginTop: image ? 0 : theme.spacing(8),
40    width: '280px',
41    maxWidth: '100%',
42    paddingBottom: theme.spacing(16),
43    textAlign: 'center',
44  }),
45  noTravelImage: ({image}) => ({
46    width: image ? '100%' : 0,
47    height: image ? 'auto' : theme.spacing(6),
48    [theme.breakpoints.down('sm')]: {
49      width: image ? '50%' : 0,
50    },
51  }),
52  share: {
53    marginTop: theme.spacing(6),
54    backgroundColor: '#fff',
55  },
56}));
57
58export default NoCar;