frontend/containers/LoginToAttend/LoginToAttend.tsx (view raw)
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;