update pay function

boilerplate-chakra-pro-main/components/auth-ui/OauthSignIn.tsx

@@ -0,0 +1,77 @@
+'use client';
+
+ 
+import { signInWithOAuth } from '@/utils/auth-helpers/client';
+import { type Provider } from '@supabase/supabase-js';
+import { FcGoogle } from "react-icons/fc";
+import { useState } from 'react';
+import { useColorModeValue } from '@chakra-ui/system';
+import { Box, Button, Icon, Input } from '@chakra-ui/react';
+import { IconType } from 'react-icons';
+
+type OAuthProviders = {
+  name: Provider;
+  displayName: string;
+  icon: IconType;
+};
+
+export default function OauthSignIn() {
+  // Chakra color mode 
+  const googleBg = useColorModeValue('secondaryGray.300', 'whiteAlpha.200');
+  const googleText = useColorModeValue('navy.700', 'white');
+  const googleHover = useColorModeValue(
+    { bg: 'gray.200' },
+    { bg: 'whiteAlpha.300' },
+  );
+  const googleActive = useColorModeValue(
+    { bg: 'secondaryGray.300' },
+    { bg: 'whiteAlpha.200' },
+  );
+  const oAuthProviders: OAuthProviders[] = [
+    {
+      name: 'google',
+      displayName: 'Google',
+      icon: FcGoogle
+    }
+    /* Add desired OAuth providers here */
+  ];
+  const [isSubmitting, setIsSubmitting] = useState(false);
+
+  const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
+    setIsSubmitting(true); // Disable the button while the request is being handled
+    await signInWithOAuth(e);
+    setIsSubmitting(false);
+  };
+
+  return (
+    <Box  mt="40px">
+      {oAuthProviders.map((provider) => (
+        <form
+          key={provider.name}
+          className="pb-2"
+          onSubmit={(e) => handleSubmit(e)}
+        >
+          <Input type="hidden" name="provider" value={provider.name} />
+          <Button
+            fontSize="sm"
+            me="0px" 
+            py="15px"
+            h="50px"
+            w="100%"
+            borderRadius="16px"
+            bg={googleBg}
+            color={googleText}
+            fontWeight="500"
+            _hover={googleHover}
+            _active={googleActive}
+            _focus={googleActive}
+            type="submit"
+          >
+            <Icon as={ provider.icon}  w="20px" h="20px" me="10px" />
+            {provider.displayName}
+          </Button> 
+        </form>
+      ))}
+    </Box>
+  );
+}