🚚 separating forms ui and logic

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

app/(auth)/log-in/page.tsx

@@ -1,4 +1,4 @@
-import LoginCard from "@/widgets/login/loginCard/Index";
+import LoginCard from "@/widgets/authentication/login/LoginCard";
 import React from "react";
 
 const page = () => {

app/(auth)/sign-up/page.tsx

@@ -1,10 +1,10 @@
-import { Link } from "@heroui/react";
+import SignupCard from "@/widgets/authentication/signup/SignupCard";
 import React from "react";
 
 const page = () => {
   return (
-    <div>
-      <h1>Hello world</h1>
+    <div className="fixed z-10 w-screen h-screen flex justify-center items-center -mt-12">
+      <SignupCard />
     </div>
   );
 };

features/auth/ui/LoginForm.tsx

@@ -1,30 +0,0 @@
-"use client";
-
-import { Card, CardBody, CardHeader, Input } from "@heroui/react";
-import React from "react";
-
-const LoginForm = () => {
-  return (
-    <Card
-      className="min-w-[30vw]"
-      shadow="none"
-      classNames={{ base: "outline-1 outline-neutral-400" }}
-    >
-      <CardHeader className="mt-2 justify-center">
-        <h1 className="text-2xl font-medium text-center">Welcome Back</h1>
-      </CardHeader>
-      <CardBody className="px-4">
-        <Input
-          label="Email"
-          variant="bordered"
-          classNames={{
-            input: "focus:outline-none text-md",
-            label: "mb-1",
-          }}
-        />
-      </CardBody>
-    </Card>
-  );
-};
-
-export default LoginForm;

features/login/ui/EmailForm.tsx

@@ -0,0 +1,27 @@
+"use client";
+
+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;

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;