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