🚚 separating forms ui and logic

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

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;

features/signup/ui/EmailForm.tsx

@@ -0,0 +1,25 @@
+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;