frontend/containers/WelcomeDialog/index.tsx (view raw)
1import React from 'react';
2import {makeStyles} from '@material-ui/core/styles';
3import Dialog from '@material-ui/core/Dialog';
4import CardMedia from '@material-ui/core/CardMedia';
5import DialogActions from '@material-ui/core/DialogActions';
6import DialogContent from '@material-ui/core/DialogContent';
7import DialogContentText from '@material-ui/core/DialogContentText';
8import Typography from '@material-ui/core/Typography';
9import Button from '@material-ui/core/Button';
10import {useTranslation} from 'react-i18next';
11import useTourStore from '../../stores/useTourStore';
12
13const WelcomeDialog = () => {
14 const {t} = useTranslation();
15 const showWelcome = useTourStore(s => s.showWelcome);
16 const setTour = useTourStore(s => s.setTour);
17 const classes = useStyles();
18
19 const onStartTour = () =>
20 setTour({showWelcome: false, run: true, step: 0, prev: -1});
21
22 const onCancel = () => setTour({showWelcome: false});
23
24 return (
25 <Dialog open={showWelcome} fullWidth maxWidth="xs">
26 <CardMedia
27 className={classes.media}
28 image="/assets/Caroster_Octree_Social.jpg"
29 />
30 <DialogContent>
31 <DialogContentText align="center">
32 <Typography variant="h6" color="primary">
33 {t('tour.welcome.title')}
34 </Typography>
35 <Typography color="textPrimary">{t('tour.welcome.text')}</Typography>
36 </DialogContentText>
37 </DialogContent>
38 <DialogActions>
39 <Button onClick={onCancel} id="TourCancel">
40 {t('tour.welcome.nope')}
41 </Button>
42 <Button
43 onClick={onStartTour}
44 id="TourConfirm"
45 variant="contained"
46 color="primary"
47 >
48 {t('tour.welcome.onboard')}
49 </Button>
50 </DialogActions>
51 </Dialog>
52 );
53};
54
55const useStyles = makeStyles({
56 media: {
57 height: 240,
58 },
59});
60
61export default WelcomeDialog;