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;