update pay function

boilerplate-chakra-pro-main/components/image/Avatar.tsx

@@ -0,0 +1,42 @@
+'use client';
+
+import { Image } from './Image';
+import { chakra, useColorMode } from '@chakra-ui/system';
+import { ComponentProps } from 'react';
+
+type AvatarImageProps = Partial<
+  ComponentProps<typeof Image> & {
+    showBorder?: boolean;
+  }
+>;
+
+export function NextAvatar({
+  src,
+  showBorder,
+  alt = '',
+  style,
+  ...props
+}: AvatarImageProps) {
+  const { colorMode } = useColorMode();
+
+  return (
+    <Image
+      {...props}
+      {...(showBorder
+        ? {
+            border: '2px',
+            borderColor: colorMode === 'dark' ? '#120F43' : 'white',
+          }
+        : {})}
+      alt={alt}
+      objectFit={'fill'}
+      src={src}
+      style={{ ...style, borderRadius: '50%' }}
+    />
+  );
+}
+
+export const ChakraNextAvatar = chakra(NextAvatar, {
+  shouldForwardProp: (prop) =>
+    ['width', 'height', 'src', 'alt', 'layout'].includes(prop),
+});

boilerplate-chakra-pro-main/components/image/Image.tsx

@@ -0,0 +1,38 @@
+'use client'
+import { Box, BoxProps } from '@chakra-ui/react';
+import NextImage, { ImageProps } from 'next/legacy/image';
+import { ComponentProps } from 'react';
+
+type ChakraNextImageProps = Partial<ImageProps> &
+    Partial<BoxProps> & {
+        nextProps?: Partial<ComponentProps<typeof NextImage>>;
+    };
+
+function parseAssetPrefix(image: string) {
+    const alreadyHasHttp = image.match('http');
+    if (alreadyHasHttp) return image;
+
+    const prefix = process.env.NEXT_PUBLIC_BASE_PATH || '';
+    const alreadyHasPrefix = image.match(prefix);
+
+    const finalUrl = alreadyHasPrefix ? image : `${prefix}${image}`;
+    return finalUrl;
+}
+
+export function Image(props: ChakraNextImageProps) {
+    const { src, alt, nextProps = {}, ...rest } = props;
+
+    const imageUrl =
+        typeof src === 'string' ? src : ((src as any)?.src as string);
+    return (
+        <Box overflow={'hidden'} position="relative" {...rest}>
+            <NextImage
+                layout="fill"
+                objectFit="fill"
+                src={parseAssetPrefix(imageUrl)}
+                alt={alt}
+                {...nextProps}
+            />
+        </Box>
+    );
+}