🚚 (mv) separating card from other components

features/auth/pages/LoginPage.tsx

@@ -2,7 +2,7 @@
 
 import { redirect } from "next/navigation";
 import React, { useEffect, useState } from "react";
-import Login from "@/features/auth/ui/Login";
+import Login from "@/features/auth/ui/cards/Login";
 import SecurityCheckup from "@/shared/auth/ui/SecurityCheckup";
 import SecurityCheckupFailed from "@/shared/auth/ui/SecurityCheckupFailed";
 

features/auth/pages/SignupPage.tsx

@@ -4,7 +4,7 @@ import { redirect } from "next/navigation";
 import React, { JSX, useEffect, useState } from "react";
 import SecurityCheckup from "@/shared/auth/ui/SecurityCheckup";
 import SecurityCheckupFailed from "@/shared/auth/ui/SecurityCheckupFailed";
-import Signup from "../ui/Signup";
+import Signup from "../ui/cards/Signup";
 
 const SignupPage = () => {
   // State to set the current page component

features/auth/ui/cards/Login.tsx

@@ -1,10 +1,10 @@
 "use client";
 
 import React from "react";
-import EmailInput from "./EmailInput";
 import { Divider, Link } from "@heroui/react";
 import { routes } from "@/shared/config/routes";
-import OAuthProviders from "./OAuthProviders";
+import EmailInput from "../components/EmailInput";
+import OAuthProviders from "../components/OAuthProviders";
 
 const Login = () => {
   return (

features/auth/ui/cards/Signup.tsx

@@ -1,11 +1,10 @@
 "use client";
 
 import React from "react";
-import EmailInput from "./EmailInput";
+import { Divider, Link } from "@heroui/react";
-import { Button, Divider, Link } from "@heroui/react";
 import { routes } from "@/shared/config/routes";
-import OAuthProviders from "./OAuthProviders";
+import OAuthProviders from "../components/OAuthProviders";
-import DebugPage from "@/app/debug/DebugPage";
+import FullNameInput from "../components/FullNameInput";
 
 type Props = {
   changeCurrentPage: React.Dispatch<React.SetStateAction<React.JSX.Element>>;
@@ -18,14 +17,7 @@ const Signup = ({ changeCurrentPage }: Props) => {
 
       {/* Email form */}
       <div className="mt-6 px-3">
-        <EmailInput />
+        <FullNameInput changeCurrentPage={changeCurrentPage} />
-        <Button
-          onPress={() => changeCurrentPage(<DebugPage />)}
-          className="mt-2 w-full"
-          color="primary"
-        >
-          For debug only
-        </Button>
       </div>
 
       {/* Sign up link */}

features/auth/ui/components/FullNameInput.tsx

@@ -0,0 +1,38 @@
+"use client";
+
+import React, { useState } from "react";
+import { Button, Input } from "@heroui/react";
+import DebugPage from "@/app/debug/DebugPage";
+
+type Props = {
+  changeCurrentPage: React.Dispatch<React.SetStateAction<React.JSX.Element>>;
+};
+
+const FullNameInput = ({ changeCurrentPage }: Props) => {
+  const [fullName, setFullName] = useState("");
+
+  return (
+    <>
+      <Input
+        className="w-full "
+        label="Full Name"
+        type="name"
+        variant="bordered"
+        onChange={(e) => setFullName(e.target.value)}
+        classNames={{
+          input: "text-md font-light pt-4",
+          inputWrapper: "flex gap-10",
+        }}
+      />
+      <Button
+        onPress={() => changeCurrentPage(<DebugPage />)}
+        className="mt-2 w-full"
+        color="primary"
+      >
+        Continue
+      </Button>
+    </>
+  );
+};
+
+export default FullNameInput;

features/auth/ui/components/OAuthProviders.tsx

@@ -1,13 +1,12 @@
 "use client";
 
-import { OauthProviders } from "../types/oauthProvidersList";
-import { ResponseRequestOauthUrl } from "../types/responseRequestOauthUrl";
-
 import React, { useEffect, useState } from "react";
+import { OauthProviders } from "../../types/oauthProvidersList";
+import { ResponseRequestOauthUrl } from "../../types/responseRequestOauthUrl";
 import { Button } from "@heroui/react";
 import { Icon } from "@iconify/react";
-import getOauthProviderList from "../lib/getOauthProviderList";
+import getOauthProviderList from "../../lib/getOauthProviderList";
-import requestOauthUrl from "../lib/requestOauthUrl";
+import requestOauthUrl from "../../lib/requestOauthUrl";
 
 const OAuthProviders = () => {
   // Set initial state for OAuth providers list