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 {TravelEntity} from '../../generated/graphql';
7import {Popup} from 'react-leaflet';
8import {useTranslation} from 'react-i18next';
9import getMapsLink from '../../lib/getMapsLink';
10
11interface Props {
12 travel: TravelEntity;
13}
14
15const TravelPopup = ({travel}: Props) => {
16 const {t} = useTranslation();
17 return (
18 <Popup>
19 <Card sx={{p: 2, width: '350px', maxWidth: '100%', cursor: 'pointer'}}>
20 {!!travel.attributes.departure && (
21 <Typography variant="overline" color="Graytext" id="TravelDeparture">
22 {moment(travel.attributes.departure).format('LLLL')}
23 </Typography>
24 )}
25 <Box>
26 <Typography variant="h5">{travel.attributes.vehicleName}</Typography>
27 </Box>
28 {!!travel.attributes.phone_number && (
29 <Box sx={{marginTop: 2}}>
30 <Typography variant="overline" color="GrayText">
31 {t('travel.fields.phone')}
32 </Typography>
33 <Typography variant="body1">
34 {travel.attributes.phone_number}
35 </Typography>
36 </Box>
37 )}
38 {!!travel.attributes.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.attributes.meeting)}
49 onClick={e => e.stopPropagation()}
50 sx={{color: 'primary.main'}}
51 >
52 {travel.attributes.meeting}
53 </Link>
54 </Typography>
55 </Box>
56 )}
57 </Card>
58 </Popup>
59 );
60};
61export default TravelPopup;