frontend/containers/PassengersList/Passenger.tsx (view raw)
1import {ReactNode} from 'react';
2import ListItemAvatar from '@material-ui/core/ListItemAvatar';
3import ListItemIcon from '@material-ui/core/ListItemIcon';
4import ListItemText from '@material-ui/core/ListItemText';
5import Icon from '@material-ui/core/Icon';
6import {makeStyles} from '@material-ui/core/styles';
7import {useTranslation} from 'react-i18next';
8import {ComponentPassengerPassenger} from '../../generated/graphql';
9
10interface Props {
11 passenger?: ComponentPassengerPassenger;
12 button?: ReactNode;
13}
14
15const Passenger = (props: Props) => {
16 const {passenger, button} = props;
17 const {t} = useTranslation();
18 const classes = useStyles();
19
20 if (passenger)
21 return (
22 <>
23 <ListItemText primary={passenger.name} />
24 {button}
25 </>
26 );
27 else
28 return (
29 <>
30 <ListItemAvatar>
31 <ListItemIcon color="disabled">
32 <Icon>person</Icon>
33 </ListItemIcon>
34 </ListItemAvatar>
35 <ListItemText
36 primary={t('car.passengers.empty')}
37 classes={{
38 root: classes.empty,
39 }}
40 />
41 </>
42 );
43};
44
45const useStyles = makeStyles(theme => ({
46 empty: {
47 color: theme.palette.text.secondary,
48 },
49}));
50
51export default Passenger;