import Typography from '@material-ui/core/Typography';
import IconButton from '@material-ui/core/IconButton';
import Icon from '@material-ui/core/Icon';
import {makeStyles} from '@material-ui/core/styles';
import moment from 'moment';
import {useTranslation} from 'react-i18next';
import Link from '@material-ui/core/Link';
import {Travel} from '../../generated/graphql';
interface Props {
travel: Travel;
toggleEditing: () => void;
}
const Header = (props: Props) => {
const {travel, toggleEditing} = props;
const classes = useStyles();
const {t} = useTranslation();
return (
edit
{!!travel.departure && (
{moment(travel.departure).format('LLLL')}
)}
{travel.vehicle?.name}
{!!travel.vehicle?.phone_number && (
{t('travel.fields.phone')}
{travel.vehicle?.phone_number}
)}
{!!travel.meeting && (
{t('travel.fields.meeting_point')}
{travel.meeting}
)}
{!!travel.details && (
{t('travel.fields.details')}
{travel.details}
)}
);
};
const useStyles = makeStyles(theme => ({
header: {
padding: theme.spacing(2),
},
editBtn: {
position: 'absolute',
top: 0,
right: 0,
margin: theme.spacing(1),
zIndex: theme.zIndex.speedDial,
},
section: {
marginTop: theme.spacing(2),
},
}));
export default Header;