frontend/containers/TravelMarker/TravelPopup.tsx (view raw)
1import moment from 'moment';
2import Card from '@mui/material/Card';
3import Typography from '@mui/material/Typography';
4import Link from '@mui/material/Link';
5import Box from '@mui/material/Box';
6import {Travel} from '../../generated/graphql';
7import {Popup} from 'react-leaflet';
8import {useTranslation} from 'react-i18next';
9import getMapsLink from '../../lib/getMapsLink';
10
11interface Props {
12 travel: Travel & {id: string};
13}
14
15const TravelPopup = ({travel}: Props) => {
16 const {t} = useTranslation();
17 return (
18 <Popup>
19 <Card
20 sx={{p: 2, width: '350px', maxWidth: '100%', cursor: 'pointer'}}
21 >
22 {!!travel.departure && (
23 <Typography variant="overline" color="Graytext" id="TravelDeparture">
24 {moment(travel.departure).format('LLLL')}
25 </Typography>
26 )}
27 <Box>
28 <Typography variant="h5">{travel.vehicleName}</Typography>
29 </Box>
30 {!!travel.phone_number && (
31 <Box sx={{marginTop: 2}}>
32 <Typography variant="overline" color="GrayText">
33 {t('travel.fields.phone')}
34 </Typography>
35 <Typography variant="body1">{travel.phone_number}</Typography>
36 </Box>
37 )}
38 {!!travel.meeting && (
39 <Box sx={{marginTop: 2}}>
40 <Typography variant="overline" color="GrayText">
41 {t('travel.fields.meeting_point')}
42 </Typography>
43 <Typography variant="body1" color="primary">
44 <Link
45 component="a"
46 target="_blank"
47 rel="noopener noreferrer"
48 href={getMapsLink(travel.meeting)}
49 onClick={e => e.stopPropagation()}
50 sx={{color: 'primary.main'}}
51 >
52 {travel.meeting}
53 </Link>
54 </Typography>
55 </Box>
56 )}
57 </Card>
58 </Popup>
59 );
60};
61export default TravelPopup;