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 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;