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