🚚 separating forms ui and logic

separate the form from other elements on the signup and login cards

widgets/authentication/ContinueWithProviders.tsx

@@ -20,9 +20,10 @@ const ContinueWithProviders = () => {
 
   return (
     <div className="w-full flex flex-col gap-2 mt-4">
-      {oAuthProviders.map((provider) => {
+      {oAuthProviders.map((provider, index) => {
         return (
           <Button
+            key={index}
             className="w-full hover:bg-neutral-800"
             variant="bordered"
             startContent={<Icon icon={provider.icon} />}

widgets/authentication/login/LoginCard.tsx

@@ -1,10 +1,10 @@
 "use client";
 
 import { Card, Divider, Link } from "@heroui/react";
-import React from "react";
-import EmailForm from "./EmailForm";
-import ContinueWithProviders from "./ContinueWithProviders";
 import { routes } from "@/shared/config/routes";
+import React from "react";
+import ContinueWithProviders from "../ContinueWithProviders";
+import EmailForm from "@/features/login/ui/EmailForm";
 
 const LoginCard = () => {
   return (

widgets/authentication/signup/SignupCard.tsx

@@ -0,0 +1,38 @@
+"use client";
+
+import { Card, Divider, Link } from "@heroui/react";
+import { routes } from "@/shared/config/routes";
+import React from "react";
+import ContinueWithProviders from "../ContinueWithProviders";
+import EmailForm from "@/features/signup/ui/EmailForm";
+
+const SignupCard = () => {
+  return (
+    <Card className="px-6 sm:px-8 py-12 sm:py-8 h-screen sm:h-auto w-screen sm:w-[460px]">
+      <h1 className="text-3xl font-light text-center">Create an account</h1>
+
+      {/* Email form */}
+      <EmailForm />
+
+      {/* Log in link */}
+      <p className="text-center text-neutral-300 text-sm font-light mt-5">
+        Already have an account?{" "}
+        <Link className="text-sm font-medium" href={routes.login}>
+          Log in
+        </Link>
+      </p>
+
+      {/* Divider between email form and third-party login options */}
+      <div className="flex w-full items-center mt-4">
+        <Divider className="flex-1" />
+        <span className="px-2 text-neutral-500 text-sm">or</span>
+        <Divider className="flex-1" />
+      </div>
+
+      {/* Buttons for third-party login options */}
+      <ContinueWithProviders />
+    </Card>
+  );
+};
+
+export default SignupCard;

widgets/login/loginCard/EmailForm.tsx

@@ -1,25 +0,0 @@
-import { Button, Form, Input } from "@heroui/react";
-import React from "react";
-
-const EmailForm = () => {
-  return (
-    // Form component to handle email input
-    <Form className="mt-12 sm:mt-8">
-      <Input
-        className="w-full "
-        label="Email"
-        type="email"
-        variant="bordered"
-        classNames={{
-          input: "text-md font-light pt-4",
-          inputWrapper: "flex gap-10",
-        }}
-      />
-      <Button className="mt-2 w-full" color="primary">
-        Continue
-      </Button>
-    </Form>
-  );
-};
-
-export default EmailForm;