♻️ create dinamic 3rd auth provider

widgets/login/loginCard/ContinueWithProviders.tsx

@@ -3,25 +3,40 @@ import { Icon } from "@iconify/react";
 import React from "react";
 
 const ContinueWithProviders = () => {
+  // set to true if there are other providers coming soon
+  const comingSoonProviders: boolean = true;
+
+  // Provider for third-party auth
+  const oAuthProviders = [
+    {
+      name: "Google",
+      icon: "logos:google-icon",
+    },
+    {
+      name: "Discord",
+      icon: "logos:discord-icon",
+    },
+  ];
+
   return (
     <div className="w-full flex flex-col gap-2 mt-4">
-      <Button
-        className="w-full hover:bg-neutral-800"
-        variant="bordered"
-        startContent={<Icon icon="logos:google-icon" />}
-      >
-        Continue with Google
-      </Button>
-      <Button
-        className="w-full hover:bg-neutral-800"
-        variant="bordered"
-        startContent={<Icon icon="logos:discord-icon" />}
-      >
-        Continue with Discord
-      </Button>
-      <Button className="w-full" variant="ghost" isDisabled>
-        Other login options will come soon
-      </Button>
+      {oAuthProviders.map((provider) => {
+        return (
+          <Button
+            className="w-full hover:bg-neutral-800"
+            variant="bordered"
+            startContent={<Icon icon={provider.icon} />}
+          >
+            Continue with {provider.name}
+          </Button>
+        );
+      })}
+
+      {comingSoonProviders && (
+        <Button className="w-full" variant="ghost" isDisabled>
+          Other login options will come soon
+        </Button>
+      )}
     </div>
   );
 };