frontend/containers/Car/Header.js (view raw)
1import React from 'react';
2import Typography from '@material-ui/core/Typography';
3import IconButton from '@material-ui/core/IconButton';
4import Icon from '@material-ui/core/Icon';
5import {makeStyles} from '@material-ui/core/styles';
6import moment from 'moment';
7import {useTranslation} from 'react-i18next';
8import Link from '@material-ui/core/Link';
9const Header = ({car, toggleEditing}) => {
10 const classes = useStyles();
11 const {t} = useTranslation();
12 return (
13 <div className={classes.header}>
14 <IconButton
15 size="small"
16 color="primary"
17 className={classes.editBtn}
18 onClick={toggleEditing}
19 id="EditCarBtn"
20 >
21 <Icon>edit</Icon>
22 </IconButton>
23 {!!car.departure && (
24 <Typography variant="overline" id="CarDeparture">
25 {moment(car.departure).format('LLLL')}
26 </Typography>
27 )}
28 <Typography variant="h5" id="CarName">
29 {car.name}
30 </Typography>
31 {!!car.phone_number && (
32 <div className={classes.section}>
33 <Typography variant="subtitle2">{t('car.fields.phone')}</Typography>
34 <Typography variant="body2" id="CarPhone">
35 {car.phone_number}
36 </Typography>
37 </div>
38 )}
39 {!!car.meeting && (
40 <div className={classes.section}>
41 <Typography variant="subtitle2">
42 {t('car.fields.meeting_point')}
43 </Typography>
44 <Typography variant="body2" id="CarMeeting">
45 <Link
46 component="a"
47 size="small"
48 target="_blank"
49 rel="noopener noreferrer"
50 href={`https://maps.google.com/?q=${encodeURI(car.meeting)}`}
51 >
52 {car.meeting}
53 </Link>
54 </Typography>
55 </div>
56 )}
57 {!!car.details && (
58 <div className={classes.section}>
59 <Typography variant="subtitle2">{t('car.fields.details')}</Typography>
60 <Typography variant="body2" id="CarDetails">
61 {car.details}
62 </Typography>
63 </div>
64 )}
65 </div>
66 );
67};
68
69const useStyles = makeStyles(theme => ({
70 header: {
71 padding: theme.spacing(2),
72 },
73 editBtn: {
74 position: 'absolute',
75 top: 0,
76 right: 0,
77 margin: theme.spacing(1),
78 zIndex: theme.zIndex.speedDial,
79 },
80 section: {
81 marginTop: theme.spacing(2),
82 },
83}));
84
85export default Header;