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';
 6import clsx from 'clsx';
 7
 8interface Props {
 9  toggle: () => void;
10}
11
12const AddTravel = (props: Props) => {
13  const {toggle} = props;
14  const classes = useStyles();
15  const {t} = useTranslation();
16  return (
17    <Container
18      maxWidth="sm"
19      className={clsx([classes.container, 'tour_travel_add'])}
20    >
21      <Button
22        classes={{containedSecondary: classes.button}}
23        fullWidth
24        variant="contained"
25        color="primary"
26        onClick={toggle}
27      >
28        {t('travel.creation.title')}
29      </Button>
30    </Container>
31  );
32};
33
34const useStyles = makeStyles(theme => ({
35  container: {
36    display: 'flex',
37    justifyContent: 'center',
38    padding: 0,
39  },
40  button: {
41    backgroundColor: theme.palette.background.paper,
42    color: theme.palette.text.primary,
43    '&:hover': {color: theme.palette.secondary.contrastText},
44  },
45}));
46
47export default AddTravel;