first commit

2023-01-16 13:09:45 -05:00
commit a6ebce376c
271 changed files with 39454 additions and 0 deletions
@@ -0,0 +1,73 @@
+import React, { useEffect } from "react";
+
+export default function Otp() {
+  useEffect(() => {
+    const otp = document.querySelector("#otp-inputs");
+    // eslint-disable-next-line no-restricted-syntax
+    for (const pin of otp.children) {
+      // eslint-disable-next-line no-loop-func
+      pin.onkeyup = () => {
+        if (pin.nextSibling) {
+          pin.nextSibling.children.otp.focus();
+        }
+      };
+    }
+  });
+  return (
+    <>
+      <div
+        className="otp-input-com flex sm:space-x-5 space-x-3 justify-center mb-8"
+        id="otp-inputs"
+      >
+        <div className="input-wrapper border border-light-purple dark:border-[#5356fb29]  sm:w-14 sm:h-14 w-12 h-12 rounded-[50px]  overflow-hidden relative ">
+          <input
+            className="input-field placeholder:text-base leading-14 text-center items-center text-2xl font-bold text-dark-gray dark:text-white w-full h-full bg-[#FAFAFA] dark:bg-[#11131F]  focus:ring-2 focus:outline-none"
+            type="text"
+            maxLength={1}
+            id="otp"
+          />
+        </div>
+        <div className="input-wrapper border border-light-purple dark:border-[#5356fb29]  sm:w-14 sm:h-14 w-12 h-12 rounded-[50px] overflow-hidden relative ">
+          <input
+            className="input-field placeholder:text-base text-2xl font-bold leading-14 text-center  text-dark-gray dark:text-white w-full h-full  bg-[#FAFAFA] dark:bg-[#11131F]  focus:ring-2 focus:outline-none"
+            type="text"
+            maxLength={1}
+            id="otp"
+          />
+        </div>
+        <div className="input-wrapper border border-light-purple dark:border-[#5356fb29]  sm:w-14 sm:h-14 w-12 h-12 rounded-[50px] overflow-hidden relative ">
+          <input
+            className="input-field placeholder:text-base text-2xl font-bold  leading-14 text-center  text-dark-gray dark:text-white w-full h-full  bg-[#FAFAFA] dark:bg-[#11131F]  focus:ring-2 focus:outline-none"
+            type="text"
+            maxLength={1}
+            id="otp"
+          />
+        </div>
+        <div className="input-wrapper border border-light-purple dark:border-[#5356fb29]  sm:w-14 sm:h-14 w-12 h-12 rounded-[50px]  overflow-hidden relative ">
+          <input
+            className="input-field placeholder:text-base text-2xl font-bold leading-14 text-center  text-dark-gray dark:text-white w-full h-full  bg-[#FAFAFA] dark:bg-[#11131F]  focus:ring-2 focus:outline-none"
+            type="text"
+            maxLength={1}
+            id="otp"
+          />
+        </div>
+        <div className="input-wrapper border border-light-purple dark:border-[#5356fb29]  sm:w-14 sm:h-14 w-12 h-12 rounded-[50px]  overflow-hidden relative ">
+          <input
+            className="input-field placeholder:text-base text-2xl font-bold leading-14 text-center  text-dark-gray dark:text-white w-full h-full  bg-[#FAFAFA] dark:bg-[#11131F]  focus:ring-2 focus:outline-none"
+            type="text"
+            maxLength={1}
+            id="otp"
+          />
+        </div>
+        <div className="input-wrapper border border-light-purple dark:border-[#5356fb29]  sm:w-14 sm:h-14 w-12 h-12 rounded-[50px] overflow-hidden relative ">
+          <input
+            className="input-field placeholder:text-base text-2xl font-bold  leading-14 text-center text-dark-gray dark:text-white w-full h-full  bg-[#FAFAFA] dark:bg-[#11131F]  focus:ring-2 focus:outline-none"
+            type="text"
+            maxLength={1}
+            id="otp"
+          />
+        </div>
+      </div>
+    </>
+  );
+}
@@ -0,0 +1,47 @@
+import React from "react";
+import titleShape from "../../../assets/images/shape/text-shape-three.svg";
+import AuthLayout from "../AuthLayout";
+import Otp from "./Otp";
+
+export default function VerifyYou() {
+  return (
+    <>
+      <AuthLayout
+        slogan="Welcome to  Nftmax
+Admin Panel"
+      >
+        <div className="content-wrapper xl:bg-white dark:bg-dark-white   w-full sm:w-auto px-5 xl:px-[70px] 2xl:px-[100px] h-[818px] rounded-xl flex flex-col justify-center">
+          <div>
+            <div className="title-area flex flex-col justify-center items-center relative text-center mb-8">
+              <h1 className="sm:text-5xl text-4xl font-bold leading-[74px]   text-dark-gray dark:text-white">
+                Verification Code
+              </h1>
+              <div className="shape sm:w-[377px] w-[270px] -mt-5 ml-5">
+                <img src={titleShape} alt="shape" />
+              </div>
+            </div>
+            <div className="input-area">
+              <Otp />
+              <div className="signin-area mb-3.5">
+                <a
+                  href="/update-password"
+                  className="w-full rounded-[50px] h-[58px] mb-6 text-xl text-white font-bold flex justify-center bg-purple items-center"
+                >
+                  Continue
+                </a>
+              </div>
+              <div className="resend-code flex justify-center">
+                <p className="text-lg text-thin-light-gray font-normal">
+                  Dont’t have an aceount ?
+                  <a href="#" className="ml-2 text-dark-gray dark:text-white font-bold">
+                    Please resend
+                  </a>
+                </p>
+              </div>
+            </div>
+          </div>
+        </div>
+      </AuthLayout>
+    </>
+  );
+}