diff --git a/src/assets/images/test1-reverse.png b/src/assets/images/test1-reverse.png new file mode 100644 index 0000000..f26dbde Binary files /dev/null and b/src/assets/images/test1-reverse.png differ diff --git a/src/components/Footer/BottomFooterOne.tsx b/src/components/Footer/BottomFooterOne.tsx index 2819d90..2babfea 100644 --- a/src/components/Footer/BottomFooterOne.tsx +++ b/src/components/Footer/BottomFooterOne.tsx @@ -62,7 +62,7 @@ const CustomerLinks = () => { ) ); return ( -
+
{links}
); diff --git a/src/components/Header/HeaderMenuItem.tsx b/src/components/Header/HeaderMenuItem.tsx index 2cd44b3..498eaea 100644 --- a/src/components/Header/HeaderMenuItem.tsx +++ b/src/components/Header/HeaderMenuItem.tsx @@ -14,13 +14,15 @@ const HeaderMenuItem: React.FC = ({ item }) => { return (
  • {item.name} {showSubMenu && item.subItems && ( -
      +
        {item.subItems.map((subItem, index) => ( ))} diff --git a/src/components/LetsGetStated/LetsGetStarted.tsx b/src/components/LetsGetStated/LetsGetStarted.tsx new file mode 100644 index 0000000..b3f0144 --- /dev/null +++ b/src/components/LetsGetStated/LetsGetStarted.tsx @@ -0,0 +1,102 @@ +import React from "react"; +import { InputCompOne } from ".."; + +const LetsGetStarted: React.FC = () => { + const [pinValues, setPinValues] = React.useState({ + bvn: "", + otp: "", + }); + + const [hideOTPComponent, setHideOTPComponent] = React.useState(true); + const inputRef = React.useRef(null); + + const handleChange = (e: React.ChangeEvent) => { + let { name, value } = e.target as HTMLInputElement; + + setPinValues((prev) => ({ ...prev, [name]: value })); + }; + + const handleInput = (e: React.FormEvent) => { + let { name, value } = e.target as HTMLInputElement; + + if (name === "bvn") { + const regex = /^[0-9]+$/; + + if (regex.test(value)) { + if (value?.length == 10) { + setHideOTPComponent(false); + } else setHideOTPComponent(true); + } else { + console.log("object not found"); + } + } + }; + + return ( +
        +
        +
        +

        + Let’s Get You Started +

        +
        +
        + + {!hideOTPComponent ? ( + + ) : null} + + + {hideOTPComponent ? ( +

        + ***Every personal information attached to your BVN is safe and + secure. It is only important for us to verify your information and + also give you access to your application profile/account. +

        + ) : ( +

        + ***Did not receive OTP? Click to resend +

        + )} + +
        +
        + ); +}; + +export default LetsGetStarted; diff --git a/src/components/LetsGetStated/LetsGetStartedNav.tsx b/src/components/LetsGetStated/LetsGetStartedNav.tsx new file mode 100644 index 0000000..e4116f6 --- /dev/null +++ b/src/components/LetsGetStated/LetsGetStartedNav.tsx @@ -0,0 +1,22 @@ +import React from "react"; +import { Link } from "react-router-dom"; +import Logo from "../../assets/icons/logo.svg"; + + +const LetsGetStartedNav: React.FC = () => { + return ( +
        +
        + + Logo + +
        +
        + ); +}; + +export default LetsGetStartedNav; diff --git a/src/components/LetsGetStated/index.ts b/src/components/LetsGetStated/index.ts new file mode 100644 index 0000000..35c2c03 --- /dev/null +++ b/src/components/LetsGetStated/index.ts @@ -0,0 +1,4 @@ +import LetsGetStarted from "./LetsGetStarted"; +import LetsGetStartedNav from "./LetsGetStartedNav"; + +export { LetsGetStarted, LetsGetStartedNav }; diff --git a/src/components/index.ts b/src/components/index.ts index 8423231..50e7f51 100644 --- a/src/components/index.ts +++ b/src/components/index.ts @@ -7,4 +7,5 @@ export * from "./DashboardLayout"; export * from "./Icons"; export * from "./Dashboard"; export * from "./Cards"; +export * from "./LetsGetStated"; export * from "./TsAndCs"; diff --git a/src/components/shared/InputCompOne.tsx b/src/components/shared/InputCompOne.tsx index eba689e..bec215e 100644 --- a/src/components/shared/InputCompOne.tsx +++ b/src/components/shared/InputCompOne.tsx @@ -21,6 +21,7 @@ export interface InputCompOneProps { parentInputClass?: string; selectClass?: string; parentSelectClass?: string; + parentClass?: string; } const InputCompOne = forwardRef( @@ -45,11 +46,12 @@ const InputCompOne = forwardRef( parentInputClass, selectClass, parentSelectClass, + parentClass, }, forwardedRef ) => { return ( -
        +
        {label && (