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    textAlign: 'center',
43  }),
44  noTravelImage: ({image}) => ({
45    width: image ? '100%' : 0,
46    height: image ? 'auto' : theme.spacing(6),
47  }),
48  share: {
49    marginTop: theme.spacing(6),
50  },
51}));
52
53export default NoCar;