frontend/containers/Travel/Header.tsx (view raw)
1import moment from 'moment';
2import Typography from '@mui/material/Typography';
3import IconButton from '@mui/material/IconButton';
4import Icon from '@mui/material/Icon';
5import Box from '@mui/material/Box';
6import Link from '@mui/material/Link';
7import {useTheme} from '@mui/material/styles';
8import {useTranslation} from 'react-i18next';
9import getMapsLink from '../../lib/getMapsLink';
10import {Travel} from '../../generated/graphql';
11
12interface Props {
13 travel: Travel;
14 toggleEditing: () => void;
15}
16
17const Header = (props: Props) => {
18 const {travel, toggleEditing} = props;
19 const theme = useTheme();
20 const {t} = useTranslation();
21
22 return (
23 <Box sx={{padding: theme.spacing(2)}}>
24 <IconButton
25 size="small"
26 color="primary"
27 sx={{position: 'absolute', top: 0, right: 0, margin: theme.spacing(1)}}
28 onClick={toggleEditing}
29 id="EditTravelBtn"
30 >
31 <Icon>edit</Icon>
32 </IconButton>
33 {!!travel.departure && (
34 <Typography variant="overline" id="TravelDeparture">
35 {moment(travel.departure).format('LLLL')}
36 </Typography>
37 )}
38 <Typography variant="h5" id="TravelName">
39 {travel.vehicleName}
40 </Typography>
41 {!!travel.phone_number && (
42 <Box sx={{marginTop: theme.spacing(2)}}>
43 <Typography variant="subtitle2">
44 {t('travel.fields.phone')}
45 </Typography>
46 <Typography variant="body2" id="TravelPhone">
47 {travel.phone_number}
48 </Typography>
49 </Box>
50 )}
51 {!!travel.meeting && (
52 <Box sx={{marginTop: theme.spacing(2)}}>
53 <Typography variant="subtitle2">
54 {t('travel.fields.meeting_point')}
55 </Typography>
56 <Typography variant="body2" id="TravelMeeting">
57 <Link
58 component="a"
59 target="_blank"
60 rel="noopener noreferrer"
61 href={getMapsLink(travel.meeting)}
62 >
63 {travel.meeting}
64 </Link>
65 </Typography>
66 </Box>
67 )}
68 {!!travel.details && (
69 <Box sx={{marginTop: theme.spacing(2)}}>
70 <Typography variant="subtitle2">
71 {t('travel.fields.details')}
72 </Typography>
73 <Typography variant="body2" id="TravelDetails">
74 {travel.details}
75 </Typography>
76 </Box>
77 )}
78 </Box>
79 );
80};
81
82export default Header;