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