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="center" pt={2} gap={1}>
25        <Link href={`/auth/login?redirectPath=${router.asPath}`} passHref>
26          <Button sx={{mr: 0.5}} variant="outlined">
27            {t('event.loginToAttend.login')}
28          </Button>
29        </Link>
30      </Box>
31    </Box>
32  );
33};
34
35export default LoginToAttend;