feat : login mobile or email complated

src/pages/login/index.tsx

@@ -1,123 +1,27 @@
-// import Input from "../../components/input";
-import Button from "../../components/button";
 import { useState } from "react";
-// import LoginNumberOrEmail from "./components/LoginNumberOrEmail";
-import { motion } from "framer-motion";
-// import Rabbit from "./components/Rabbit";
-import OTPInput from "react-otp-input";
+
+import LoginNumberOrEmail from "./components/LoginNumberOrEmail";
+import LoginMobileForm from "./components/LoginMobileForm";
+import LoginEmailForm from "./components/LoginEmailForm";
 
 const Login = () => {
-  // const [loginWithEmail, setLoginWithEmail] = useState<boolean>(false);
-  // const [inputText, setInputText] = useState<boolean>(false);
-  // const [inputPassword, setInputPassword] = useState<boolean>(false);
-
-  const [authCode, setAuthCode] = useState<boolean>(false);
-  const [errorCode, setErrorCode] = useState<boolean>(false);
-
-  const [otp, setOtp] = useState<string>("");
-
-  const handleChange = (otp: string) => {
-    setOtp(otp);
-    if (otp === "1111" && otp.length === 4)
-      setAuthCode(true), setErrorCode(false);
-    else if (otp.length === 4) setErrorCode(true), setAuthCode(false);
-    else setAuthCode(false), setErrorCode(false);
-  };
+  const [loginWithEmail, setLoginWithEmail] = useState<boolean>(false);
+  const [isShowLoginNumberOrEmail , setisShowLoginNumberOrEmail] = useState(true);
 
   return (
     <>
       <div className="w-4/5 rounded-lg shadow md:mt-0 sm:max-w-md xl:p-0 glass">
-        {/* <Rabbit focusInputText={inputText} focusInputPassword={inputPassword} /> */}
         <div className="p-6 space-y-4 md:space-y-6 sm:p-8">
           <h1 className="text-2xl font-bold text-center leading-tight tracking-tight md:text-3xl text-white">
             ورود
           </h1>
-          <h1 className="text-base text-center leading-tight tracking-tight md:text-lg text-white">
-            کد ارسال شده رو وارد نمایید:
-          </h1>
-          {/* <LoginNumberOrEmail
-            loginWithEmail={loginWithEmail}
-            setLoginWithEmail={setLoginWithEmail}
-          /> */}
-          <form className="flex flex-col gap-10">
-            <div className="w-full h-full flex flex-col gap-2">
-              {/* {!loginWithEmail && (
-                <motion.div
-                  initial={{ x: "100vw", opacity: 0 }}
-                  animate={{ x: 0, opacity: 1 }}
-                >
-                  <Input
-                    id="number"
-                    type="text"
-                    label="شماره:"
-                    placeholder="sghl"
-                    onFocus={() => setInputText(true)}
-                    onBlur={() => setInputText(false)}
-                  />
-                </motion.div>
-              )}
-              {loginWithEmail && (
-                <motion.div
-                  initial={{ x: "-100vw", opacity: 0 }}
-                  animate={{ x: 0, opacity: 1 }}
-                >
-                  <Input
-                    id="ss"
-                    type="text"
-                    label="ایمیل:"
-                    placeholder="sghl"
-                    onFocus={() => setInputText(true)}
-                    onBlur={() => setInputText(false)}
-                  />
-                </motion.div>
-              )} */}
-              <OTPInput
-                value={otp}
-                onChange={handleChange}
-                numInputs={4}
-                inputStyle={{
-                  width: "3rem",
-                  height: "3rem",
-                  margin: "0 0.5rem",
-                  fontSize: "2rem",
-                  borderRadius: "4px",
-                  border: "none",
-                  outline: "none",
-                  textAlign: "center",
-                  direction: "ltr",
-                }}
-                shouldAutoFocus={true}
-                containerStyle={{
-                  display: "flex",
-                  flexDirection: "row-reverse",
-                  justifyContent: "center",
-                }}
-                renderInput={(props) => (
-                  <motion.input
-                    {...props}
-                    type="number"
-                    initial={{
-                      y: 20,
-                      opacity: 0,
-                      border: "2px solid transparent",
-                    }}
-                    animate={{
-                      y: 0,
-                      opacity: 1,
-                      border: `2px solid ${
-                        authCode ? "green" : errorCode ? "red" : "transparent"
-                      }`,
-                    }}
-                    className={`bg-gray-800 focus:outline-none focus:ring-1 focus:ring-gray-600 shadow-md max-sm:!w-[2.5rem] max-sm:!h-[2.5rem] shadow-gray-900 ${props.className}`}
-                  />
-                )}
-              />
-            </div>
-
-            <div className="w-full h-full grid grid-cols-1">
-              <Button extra="py-2">تایید</Button>
-            </div>
-          </form>
+          {isShowLoginNumberOrEmail && (
+            <LoginNumberOrEmail
+              loginWithEmail={loginWithEmail}
+              setLoginWithEmail={setLoginWithEmail}
+            />
+          )}
+          {!loginWithEmail ? <LoginMobileForm setisShowLoginNumberOrEmail={setisShowLoginNumberOrEmail} /> : <LoginEmailForm />}
         </div>
       </div>
     </>