80 lines
2.1 KiB
TypeScript
80 lines
2.1 KiB
TypeScript
'use client';
|
|
|
|
import Footer from '@/components/footer/FooterAuthDefault';
|
|
import NavLink from '@/components/link/NavLink';
|
|
import { Box, Flex, Icon, Link, Text } from '@chakra-ui/react';
|
|
import { PropsWithChildren } from 'react';
|
|
import { FaChevronLeft } from 'react-icons/fa';
|
|
interface DefaultAuthLayoutProps extends PropsWithChildren {
|
|
children: JSX.Element;
|
|
illustrationBackground: string;
|
|
viewProp: any;
|
|
}
|
|
|
|
export default function DefaultAuthLayout(props: DefaultAuthLayoutProps) {
|
|
const { children, illustrationBackground } = props;
|
|
return (
|
|
<Flex position="relative" h="max-content">
|
|
<Flex
|
|
minH="100vh"
|
|
w="100%"
|
|
maxW={{ base: '90%', md: '66%', lg: '1313px' }}
|
|
mx="auto"
|
|
pt={{ sm: '0px', md: '0px' }}
|
|
px={{ lg: '30px', xl: '0px' }}
|
|
ps={{ xl: '70px' }}
|
|
justifyContent="start"
|
|
direction="column"
|
|
>
|
|
<Link
|
|
href="/"
|
|
width={'fit-content'}
|
|
mt={10}
|
|
mb={{ base: '', md: '', lg: '120px', xl: '150px' }}
|
|
>
|
|
<Flex
|
|
align="center"
|
|
ps={{ base: '25px', lg: '0px' }}
|
|
pt={{ lg: '0px', xl: '0px' }}
|
|
w="fit-content"
|
|
>
|
|
<Icon
|
|
as={FaChevronLeft}
|
|
me="12px"
|
|
h="13px"
|
|
w="8px"
|
|
color="gray.500"
|
|
/>
|
|
<Text ms="0px" fontSize="sm" color="gray.500">
|
|
Back to the website
|
|
</Text>
|
|
</Flex>
|
|
</Link>
|
|
{children}
|
|
<Box
|
|
display={{ base: 'none', md: 'block' }}
|
|
h="100%"
|
|
minH="100vh"
|
|
w={{ lg: '50vw', '2xl': '44vw' }}
|
|
position="absolute"
|
|
right="0px"
|
|
>
|
|
<Link href="/">
|
|
<Flex
|
|
bg={`url(${illustrationBackground})`}
|
|
justify="center"
|
|
align="end"
|
|
w="100%"
|
|
h="100%"
|
|
bgSize="cover"
|
|
bgPosition="50%"
|
|
position="absolute"
|
|
/>
|
|
</Link>
|
|
</Box>
|
|
<Footer />
|
|
</Flex>
|
|
</Flex>
|
|
);
|
|
}
|