update pay function

boilerplate-chakra-pro-main/components/link/Link.tsx

@@ -0,0 +1,19 @@
+'use client';
+import { ButtonProps } from '@chakra-ui/react';
+import NextLink, { LinkProps as NextLinkProps } from 'next/link';
+
+import { Button } from '@chakra-ui/react';
+
+type LinkProps = ButtonProps & NextLinkProps;
+
+function Link({ href, children, ...props }: LinkProps) {
+  return (
+    <NextLink href={href} passHref legacyBehavior>
+      <Button as="a" variant="a" {...props}>
+        {children}
+      </Button>
+    </NextLink>
+  );
+}
+
+export default Link;

boilerplate-chakra-pro-main/components/link/LinkButton.tsx

@@ -0,0 +1,20 @@
+'use client';
+import Link, { LinkProps } from 'next/link';
+import { Button, ButtonProps } from '@chakra-ui/react';
+
+type ChakraAndNextProps = ButtonProps & LinkProps;
+
+export default function LinkButton({
+  href,
+  children,
+  prefetch = true,
+  ...props
+}: ChakraAndNextProps) {
+  return (
+    <Link href={href} passHref prefetch={prefetch}>
+      <Button as="a" variant="a" {...props}>
+        {children}
+      </Button>
+    </Link>
+  );
+}

boilerplate-chakra-pro-main/components/link/NavLink.tsx

@@ -0,0 +1,31 @@
+'use client';
+import NextLink, { LinkProps as NextLinkProps } from 'next/link';
+import {
+  CSSProperties,
+  ComponentProps,
+  PropsWithChildren,
+  useMemo,
+} from 'react';
+
+export type NavLinkProps = NextLinkProps &
+  PropsWithChildren & {
+    styles?: CSSProperties;
+    borderRadius?: ComponentProps<typeof NextLink>['style'];
+  };
+
+function NavLink({ children, styles, ...props }: NavLinkProps) {
+  const memoizedStyles = useMemo(
+    () => ({
+      ...styles,
+    }),
+    [styles],
+  );
+
+  return (
+    <NextLink style={memoizedStyles} {...props}>
+      {children}
+    </NextLink>
+  );
+}
+
+export default NavLink;