app/src/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';
8
9const Header = ({car, toggleEditing}) => {
10 const classes = useStyles();
11 const {t} = useTranslation();
12 return (
13 <div className={classes.header}>
14 <IconButton
15 className={classes.editBtn}
16 onClick={toggleEditing}
17 id="EditCarBtn"
18 >
19 <Icon>edit</Icon>
20 </IconButton>
21 {!!car.departure && (
22 <Typography variant="overline" id="CarDeparture">
23 {moment(car.departure).format('LLLL')}
24 </Typography>
25 )}
26 <Typography variant="h5" id="CarName">
27 {car.name}
28 </Typography>
29 {!!car.phone_number && (
30 <div className={classes.section}>
31 <Typography variant="subtitle2">{t('car.fields.phone')}</Typography>
32 <Typography variant="body2" id="CarPhone">
33 {car.phone_number}
34 </Typography>
35 </div>
36 )}
37 {!!car.meeting && (
38 <div className={classes.section}>
39 <Typography variant="subtitle2">
40 {t('car.fields.meeting_point')}
41 </Typography>
42 <Typography variant="body2" id="CarMeeting">
43 {car.meeting}
44 </Typography>
45 </div>
46 )}
47 {!!car.details && (
48 <div className={classes.section}>
49 <Typography variant="subtitle2">{t('car.fields.details')}</Typography>
50 <Typography variant="body2" id="CarDetails">
51 {car.details}
52 </Typography>
53 </div>
54 )}
55 </div>
56 );
57};
58
59const useStyles = makeStyles(theme => ({
60 header: {
61 padding: theme.spacing(2),
62 },
63 editBtn: {
64 position: 'absolute',
65 top: 0,
66 right: 0,
67 zIndex: theme.zIndex.speedDial,
68 },
69 section: {
70 marginTop: theme.spacing(2),
71 },
72}));
73
74export default Header;