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