Fixed Layout and switch functionality

src/components/GetStarted/BasicInfo.tsx

@@ -4,10 +4,10 @@ import OTPSection from "./OtpSection";
 import SpouseDetails from "./SpouseDetails";
 import { Button } from "..";
 
-interface Option {
-  value: string;
-  label: string;
-}
+// interface Option {
+//   value: 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 { name, value } = e.target;
-    setInputValues((prev) => ({ ...prev, [name]: value }));
+  const handleChange = (e: React.FormEvent<HTMLInputElement>) => {
+    const { name, value } = e.target as HTMLInputElement;
+    setInputValues((prev: typeof inputValues) => ({ ...prev, [name]: value }));
   };
 
-  const handleInput = (e: React.ChangeEvent<HTMLInputElement>) => {
-    const { name, value } = e.target;
+  const handleInput = (e: React.FormEvent<HTMLInputElement>) => {
+    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}