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