update pay function

boilerplate-chakra-pro-main/components/auth/index.tsx

@@ -0,0 +1,79 @@
+'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>
+  );
+}