1import React from 'react';
 2import Button from '@material-ui/core/Button';
 3import Container from '@material-ui/core/Container';
 4import {makeStyles} from '@material-ui/core';
 5import {useTranslation} from 'react-i18next';
 6
 7interface Props {
 8  toggleNewTravel: () => void;
 9}
10
11const AddTravel = (props: Props) => {
12  const {toggleNewTravel} = props;
13  const classes = useStyles();
14  const {t} = useTranslation();
15  return (
16    <Container maxWidth="sm" className={classes.container}>
17      <Button
18        classes={{containedSecondary: classes.button}}
19        fullWidth
20        variant="contained"
21        color="primary"
22        onClick={toggleNewTravel}
23      >
24        {t('travel.creation.title')}
25      </Button>
26    </Container>
27  );
28};
29
30const useStyles = makeStyles(theme => ({
31  container: {
32    display: 'flex',
33    justifyContent: 'center',
34    padding: 0,
35  },
36  button: {
37    backgroundColor: theme.palette.background.paper,
38    color: theme.palette.text.primary,
39    '&:hover': {color: theme.palette.secondary.contrastText},
40  },
41}));
42
43export default AddTravel;