frontend/containers/PassengersList/index.tsx (view raw)
1import {ListItem, List, styled, useTheme} from '@mui/material';
2import Passenger from './Passenger';
3import {PassengerEntity, TravelEntity} from '../../generated/graphql';
4import {ReactNode} from 'react';
5
6const PREFIX = 'PassengersList';
7
8const classes = {
9 container: `${PREFIX}-container`,
10 passenger: `${PREFIX}-passenger`,
11};
12
13const Root = styled('div')(({theme}) => ({
14 [`&.${classes.container}`]: {
15 padding: theme.spacing(0, 0, 1, 0),
16 },
17
18 [`& .${classes.passenger}`]: {
19 paddingRight: theme.spacing(12),
20 },
21}));
22
23interface Props {
24 passengers: PassengerEntity[];
25 travel?: TravelEntity;
26 onClickPassenger?: (passengerId: string) => void;
27 Actions?: (props: {passenger: PassengerEntity}) => ReactNode;
28}
29
30const PassengersList = (props: Props) => {
31 const {passengers, onClickPassenger, travel, Actions} = props;
32 const theme = useTheme();
33
34 return (
35 <Root sx={{padding: theme.spacing(0, 0, 1, 0)}}>
36 <List disablePadding>
37 {!!passengers &&
38 passengers.map((passenger, index) => (
39 <ListItem
40 key={index}
41 button={!!onClickPassenger}
42 onClick={() => onClickPassenger?.(passenger.id)}
43 >
44 <Passenger
45 key={index}
46 passenger={{
47 id: passenger.id,
48 attributes: {...passenger.attributes, travel: {data: travel}},
49 }}
50 isTravel={!!travel}
51 Actions={Actions}
52 />
53 </ListItem>
54 ))}
55 </List>
56 </Root>
57 );
58};
59
60export default PassengersList;