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