frontend/containers/AddPassengerButtons/index.tsx (view raw)
1import Icon from '@material-ui/core/Icon';
2import Box from '@material-ui/core/Box';
3import Button from '@material-ui/core/Button';
4import {makeStyles} from '@material-ui/core/styles';
5import {useTranslation} from 'react-i18next';
6
7interface Props {
8 getOnClickFunction: (addSelf: boolean) => () => void;
9 canAddSelf: boolean;
10 variant: 'waitingList' | 'travel';
11}
12
13const AddPassengerButtons = ({getOnClickFunction, canAddSelf, variant}: Props) => {
14 const classes = useStyles();
15 const {t} = useTranslation();
16
17 return (
18 <Box className={classes.addButtonsContainer}>
19 {canAddSelf && (
20 <Box className={classes.addButtonsContainer}>
21 <Button
22 className={classes.textContainer}
23 variant="contained"
24 color="secondary"
25 fullWidth
26 onClick={getOnClickFunction(true)}
27 >
28 <Icon>person_add</Icon>
29 {t('travel.passengers.add_me')}
30 </Button>
31 </Box>
32 )}
33 <Box className={classes.addButtonsContainer}>
34 <Button
35 className={classes.textContainer}
36 variant="outlined"
37 color="primary"
38 fullWidth
39 onClick={getOnClickFunction(false)}
40 >
41 <Icon>person_add</Icon>
42 {t(`travel.passengers.add_to_${variant}`)}
43 </Button>
44 </Box>
45 </Box>
46 );
47};
48
49const useStyles = makeStyles(theme => ({
50 addButtonsContainer: {
51 padding: theme.spacing(1),
52 textAlign: 'center',
53 },
54 textContainer: {
55 padding: theme.spacing(1, 8),
56 [theme.breakpoints.down(440)]: {
57 padding: theme.spacing(1, 4),
58 },
59 '& > .MuiButton-label': {
60 '& > .material-icons': {
61 width: theme.spacing(3),
62 textAlign: 'center',
63 position: 'absolute',
64 left: theme.spacing(4),
65 [theme.breakpoints.down(440)]: {
66 left: theme.spacing(1),
67 },
68 },
69 },
70 },
71}));
72
73export default AddPassengerButtons;