app/src/containers/PassengersList/Passenger.js (view raw)
1import React from 'react';
2import Box from '@material-ui/core/Box';
3import Typography from '@material-ui/core/Typography';
4import {makeStyles} from '@material-ui/core/styles';
5import {useTranslation} from 'react-i18next';
6
7const Passenger = ({passenger, button}) => {
8 const classes = useStyles();
9 const {t} = useTranslation();
10 return !!passenger ? (
11 <Box display="flex" flexDirection="row" alignItems="center" px={2} py={1}>
12 <Typography variant="body2" className={classes.name}>
13 {passenger}
14 </Typography>
15 {button}
16 </Box>
17 ) : (
18 <Box
19 display="flex"
20 flexDirection="row"
21 alignItems="center"
22 px={2}
23 py={1}
24 minHeight={46}
25 >
26 <Typography variant="body2">{t('car.passengers.empty')}</Typography>
27 </Box>
28 );
29};
30
31const useStyles = makeStyles(theme => ({
32 name: {
33 flexGrow: 1,
34 },
35}));
36
37export default Passenger;