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 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 {car.meeting}
46 </Typography>
47 </div>
48 )}
49 {!!car.details && (
50 <div className={classes.section}>
51 <Typography variant="subtitle2">{t('car.fields.details')}</Typography>
52 <Typography variant="body2" id="CarDetails">
53 {car.details}
54 </Typography>
55 </div>
56 )}
57 </div>
58 );
59};
60
61const useStyles = makeStyles(theme => ({
62 header: {
63 padding: theme.spacing(2),
64 },
65 editBtn: {
66 position: 'absolute',
67 top: 0,
68 right: 0,
69 margin: theme.spacing(1),
70 zIndex: theme.zIndex.speedDial,
71 },
72 section: {
73 marginTop: theme.spacing(2),
74 },
75}));
76
77export default Header;