1import Typography from '@mui/material/Typography';
 2import {styled, useTheme} from '@mui/material/styles';
 3import Icon from '@mui/material/Icon';
 4import {useTranslation} from 'react-i18next';
 5import CommonConfirm from '../../../layouts/ConfirmLayout';
 6import pageUtils from '../../../lib/pageUtils';
 7
 8const PREFIX = 'Confirm';
 9
10const classes = {
11  margins: `${PREFIX}-margins`,
12};
13
14const StyledCommonConfirm = styled(CommonConfirm)(({theme}) => ({
15  [`& .${classes.margins}`]: {
16    margin: theme.spacing(5, 0),
17  },
18}));
19
20const Confirm = () => {
21  const {t} = useTranslation();
22  const theme = useTheme();
23
24  return (
25    <StyledCommonConfirm>
26      <Typography variant="subtitle1" align="center">
27        {t('confirm.creating')}
28      </Typography>
29      <Typography variant="h5" align="center">
30        {t('confirm.title')}
31      </Typography>
32      <Typography
33        align="center"
34        sx={{margin: theme.spacing(5, 0)}}
35      >
36        <Icon fontSize="large">mail</Icon>
37      </Typography>
38      <Typography
39        sx={{margin: theme.spacing(5, 0)}}
40        variant="body2"
41        align="center"
42      >
43        {t('confirm.text')}
44      </Typography>
45    </StyledCommonConfirm>
46  );
47};
48
49export default Confirm;
50
51export const getServerSideProps = pageUtils.getServerSideProps();