1import Link from 'next/link';
 2import Box from '@mui/material/Box';
 3import Button from '@mui/material/Button';
 4import Typography from '@mui/material/Typography';
 5import {useRouter} from 'next/router';
 6import {useTranslation} from 'next-i18next';
 7
 8const LoginToAttend = ({title}) => {
 9  const {t} = useTranslation();
10  const router = useRouter();
11
12  return (
13    <Box my={4} mx="auto" maxWidth="100%" width={340}>
14      <Typography variant="h6" align="center" color="textSecondary">
15        {title}
16      </Typography>
17      <Typography
18        sx={{whiteSpace: 'pre-line', mt: 1}}
19        align="center"
20        color="textSecondary"
21      >
22        {t('event.loginToAttend.desc')}
23      </Typography>
24      <Box display="flex" justifyContent="space-between" pt={2} gap={1}>
25        <Link
26          href={`/auth/login?redirectPath=${router.asPath}`}
27          passHref
28          style={{width: '100%'}}
29        >
30          <Button fullWidth sx={{mr: 0.5}} variant="outlined">
31            {t('event.loginToAttend.login')}
32          </Button>
33        </Link>
34        <Link
35          href={`/auth/register?redirectPath=${router.asPath}`}
36          passHref
37          style={{width: '100%'}}
38        >
39          <Button fullWidth sx={{ml: 0.5}} variant="contained">
40            {t('event.loginToAttend.signup')}
41          </Button>
42        </Link>
43      </Box>
44    </Box>
45  );
46};
47
48export default LoginToAttend;