1import React from 'react';
 2import Card from '@material-ui/core/Card';
 3import CardActions from '@material-ui/core/CardActions';
 4import CardContent from '@material-ui/core/CardContent';
 5import Typography from '@material-ui/core/Typography';
 6import Container from '@material-ui/core/Container';
 7import Button from '@material-ui/core/Button';
 8import {useTranslation} from 'react-i18next';
 9import {useHistory} from 'react-router-dom';
10import {makeStyles} from '@material-ui/core/styles';
11
12const EmptyDashboard = () => {
13  const {t} = useTranslation();
14  const history = useHistory();
15  const classes = useStyles();
16
17  return (
18    <Container maxWidth="sm" className={classes.container}>
19      <Card>
20        <CardContent>
21          <Typography gutterBottom variant="h5" component="h1">
22            {t('dashboard.noEvent.title')}
23          </Typography>
24          <Typography
25            variant="body1"
26            gutterBottom
27            dangerouslySetInnerHTML={{
28              __html: t('dashboard.noEvent.text_html'),
29            }}
30          />
31        </CardContent>
32        <CardActions>
33          <Button
34            onClick={() => history.push('/new')}
35            variant="contained"
36            color="primary"
37          >
38            {t('dashboard.noEvent.create_event')}
39          </Button>
40        </CardActions>
41      </Card>
42    </Container>
43  );
44};
45
46const useStyles = makeStyles(theme => ({
47  container: {paddingTop: theme.spacing(8)},
48}));
49
50export default EmptyDashboard;