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 isVehicle?: boolean;
14}
15
16const Passenger = (props: Props) => {
17 const {passenger, button, isVehicle} = props;
18 const {t} = useTranslation();
19 const classes = useStyles();
20
21 const showLocation = isVehicle ? false : passenger.location
22
23 if (passenger) {
24 return (
25 <>
26 <ListItemText
27 primary={passenger.name}
28 secondary={showLocation}
29 />
30 {button}
31 </>
32 );
33 } else
34 return (
35 <>
36 <ListItemAvatar>
37 <ListItemIcon color="disabled">
38 <Icon>person</Icon>
39 </ListItemIcon>
40 </ListItemAvatar>
41 <ListItemText
42 primary={t('travel.passengers.empty')}
43 classes={{
44 root: classes.empty,
45 }}
46 />
47 </>
48 );
49};
50
51const useStyles = makeStyles(theme => ({
52 empty: {
53 color: theme.palette.text.secondary,
54 },
55}));
56
57export default Passenger;