feat add login page and components

src/pages/login/index.tsx

@@ -0,0 +1,78 @@
+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";
+
+const Login = () => {
+  const [loginWithEmail, setLoginWithEmail] = useState<boolean>(false);
+  const [inputText, setInputText] = useState<boolean>(false);
+  const [inputPassword, setInputPassword] = useState<boolean>(false);
+
+  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>
+          <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>
+              )}
+
+              <Input
+                id="ss"
+                type="password"
+                label="رمز عبور"
+                placeholder="sghl"
+                onFocus={() => setInputPassword(true)}
+                onBlur={() => setInputPassword(false)}
+              />
+            </div>
+
+            <div className="w-full h-full grid grid-cols-1">
+              <Button extra="py-2">ورود</Button>
+            </div>
+          </form>
+        </div>
+      </div>
+    </>
+  );
+};
+
+export default Login;