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