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