Fixed Layout and switch functionality

src/App.css

@@ -15,7 +15,7 @@
   padding-inline: 3rem !important;
   font-weight: bold !important;
   font-size: 16px !important;
-
+  background-color: #5A2C82;
 }
 
 .sidebar {

src/components/GetStarted/BasicInfo.tsx

@@ -4,10 +4,10 @@ import OTPSection from "./OtpSection";
 import SpouseDetails from "./SpouseDetails";
 import { Button } from "..";
 
-interface Option {
+// interface Option {
-  value: string;
+//   value: string;
-  label: string;
+//   label: string;
-}
+// }
 
 interface BasicInfoProps {
   inputValues: {
@@ -24,7 +24,7 @@ interface BasicInfoProps {
     spouseBVN: string;
   };
   setInputValues: React.Dispatch<React.SetStateAction<any>>;
-  handleNextStep: React.MouseEventHandler<HTMLButtonElement>;
+  handleNextStep: any;
 }
 
 const BasicInfo: React.FC<BasicInfoProps> = ({
@@ -35,13 +35,13 @@ const BasicInfo: React.FC<BasicInfoProps> = ({
   const [hideOTPComponent, setHideOTPComponent] = useState<boolean>(true);
   const inputRef = useRef<HTMLInputElement>(null);
 
-  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+  const handleChange = (e: React.FormEvent<HTMLInputElement>) => {
-    const { name, value } = e.target;
+    const { name, value } = e.target as HTMLInputElement;
-    setInputValues((prev) => ({ ...prev, [name]: value }));
+    setInputValues((prev: typeof inputValues) => ({ ...prev, [name]: value }));
   };
 
-  const handleInput = (e: React.ChangeEvent<HTMLInputElement>) => {
+  const handleInput = (e: React.FormEvent<HTMLInputElement>) => {
-    const { name, value } = e.target;
+    const { name, value } = e.target as HTMLInputElement;
 
     if (name === "bvn") {
       const isNumeric = /^[0-9]+$/.test(value);
@@ -86,7 +86,7 @@ const BasicInfo: React.FC<BasicInfoProps> = ({
               inputRef={inputRef}
             />
             <Button
-              className="mt-8 btn-R"
+              className="mt-8 btn-R bg-[#5A2C82]"
               text="Enter"
               type="button"
               onClick={handleNextStep}

src/components/GetStarted/GetStarted.tsx

@@ -4,13 +4,13 @@ import BasicInfo from "./BasicInfo";
 const GetStarted = () => {
   const [step, setStep] = React.useState(1);
 
-  const handleNextStep = () => {
+  const handleNextStep: any = () => {
     setStep(step + 1);
   };
 
-  const handlePreviousStep = () => {
+  // const handlePreviousStep: React.MouseEvent<HTMLButtonElement> = () => {
-    setStep(step - 1);
+  //   setStep(step - 1);
-  };
+  // };
 
   const [inputValues, setInputValues] = React.useState({
     title: "",

src/components/GetStarted/InputSection.tsx

@@ -13,7 +13,7 @@ interface InputSectionProps {
     agentId: string;
     bvn: string;
   };
-  handleChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+  handleChange: (e: React.FormEvent<HTMLInputElement>) => void;
   handleInput: (e: React.FormEvent<HTMLInputElement>) => void;
   inputRef: React.RefObject<HTMLInputElement>;
 }

src/components/GetStarted/OtpSection.tsx

@@ -10,7 +10,7 @@ interface OTPSectionProps {
     dob: string;
     secondName: string;
   };
-  handleChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+  handleChange: (e: React.FormEvent<HTMLInputElement>) => void;
   handleInput: (e: React.FormEvent<HTMLInputElement>) => void;
   inputRef: React.RefObject<HTMLInputElement>;
 }

src/components/GetStarted/SpouseDetails.tsx

@@ -5,7 +5,7 @@ interface SpouseDetailsProps {
   inputValues: {
     spouseBVN: string;
   };
-  handleChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+  handleChange: (e: React.FormEvent<HTMLInputElement>) => void;
   handleInput: (e: React.FormEvent<HTMLInputElement>) => void;
   inputRef: React.RefObject<HTMLInputElement>;
 }
@@ -28,14 +28,14 @@ const SpouseDetails: React.FC<SpouseDetailsProps> = ({
           <InputCompOne
             parentClass="max-w-[20.3125rem]"
             label="BVN"
-            name="firstName"
+            name="spouseBVN"
             parentInputClass="w-full"
             labelSpan="( To get your BVN, dial *565*0# )"
             labelSpanClass="text-[11px] text-[#7a7373]"
             labelClass="font-bold text-[1.125rem] leading-[1.3613rem] tracking-[2%] text-[#5C2684] mb-[.125rem]"
             input
             inputClass="w-full h-[2.25rem] bg-[#EFEFEF] px-[.125rem] rounded-[.375rem]"
-            value={inputValues.firstName}
+            value={inputValues.spouseBVN}
             onChange={handleChange}
             onInput={handleInput}
             ref={inputRef}

src/components/InternetBanking/InternetBanking.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 
-const InternetBanking = () => {
+const InternetBanking: React.FC = () => {
   return (
     <div>InternetBanking</div>
   )

src/components/shared/Button.tsx

@@ -3,13 +3,21 @@ import React from "react";
 interface ButtonProps {
   text: string;
   className?: string;
-  onClick?: () => void;
+  type?: "button" | "submit" | "reset";
+  onClick?: React.MouseEventHandler<HTMLButtonElement>;
 }
 
-const Button: React.FC<ButtonProps> = ({ text, className }) => {
+const Button: React.FC<ButtonProps> = ({
+  text,
+  className,
+  onClick,
+  type = "button",
+}) => {
   return (
     <button
       className={`btn-primary uppercase text-[11px] lg:text-[13px] p-[6px] lg:px-[10px] ${className}`}
+      onClick={onClick}
+      type={type}
     >
       {text}
     </button>

src/layouts/GetStartedLayout.tsx

@@ -2,7 +2,7 @@ import React from "react";
 import { Footer, Header } from "../components";
 
 interface GetStartedLayoutProps {
-  children: ReactNode;
+  children: React.ReactNode;
 }
 
 const GetStartedLayout: React.FC<GetStartedLayoutProps> = ({ children }) => {

src/pages/GetStartedPage.tsx

@@ -1,12 +1,12 @@
 import React from "react";
-import { GetStarted as Main, Header, Footer } from "../components";
+import { GetStarted as Main } from "../components";
 import { GetStartedLayout } from "../layouts";
 
 const GetStartedPage: React.FC = () => {
   return (
-   <GetStartedLayout>
+    <GetStartedLayout>
-    <Main />
+      <Main />
-   </GetStartedLayout>
+    </GetStartedLayout>
   );
 };