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