app/src/containers/DashboardEmpty/index.js (view raw)
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;