update pay function

boilerplate-chakra-pro-main/components/card/TemplateCard.tsx

@@ -0,0 +1,71 @@
+'use client';
+
+import NavLink from '../link/NavLink';
+import Card from '@/components/card/Card';
+import {
+  Box,
+  Button,
+  Flex,
+  useColorModeValue,
+  Text,
+  Icon,
+} from '@chakra-ui/react';
+import { MdEdit } from 'react-icons/md';
+
+export default function Default(props: {
+  illustration: string | JSX.Element;
+  name: string;
+  description: string;
+  link: string;
+  edit?: string;
+  action?: any;
+  admin?: boolean;
+}) {
+  const { illustration, name, description, link, edit, admin } = props;
+  const textColor = useColorModeValue('#120F43', 'white');
+  const gray = useColorModeValue('gray.500', 'white');
+
+  return (
+    <NavLink href={link}>
+      <Card h="100%" py="24px" px="24px">
+        <Flex
+          my="auto"
+          h="100%"
+          direction={'column'}
+          align={{ base: 'center', xl: 'start' }}
+          justify={{ base: 'center', xl: 'center' }}
+        >
+          <Flex align="start" w="100%" mb="30px">
+            <Text fontSize="34px" lineHeight={'120%'}>
+              {illustration}
+            </Text>
+            {admin ? (
+              <Flex ms="auto">
+                <NavLink href={edit ? edit : '/admin/edit-template'}>
+                  <Button
+                    w="24px"
+                    h="24px"
+                    _hover={{}}
+                    _focus={{}}
+                    _active={{}}
+                    bg="none"
+                  >
+                    <Icon w="24px" h="24px" as={MdEdit} color={gray} />
+                  </Button>
+                </NavLink>
+              </Flex>
+            ) : null}
+          </Flex>
+          <Box>
+            <Text fontSize="lg" color={textColor} fontWeight="700" mb="8px">
+              {name}
+            </Text>
+            <Text fontSize="sm" color={gray} fontWeight="500">
+              {description}
+            </Text>
+          </Box>
+        </Flex>
+      </Card>
+    </NavLink>
+  );
+}