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