Corrected Form Layout

2024-03-21 10:05:44 +01:00
parent 21b4bf5e8f
commit 266627d941
13 changed files with 474 additions and 224 deletions
@@ -0,0 +1,49 @@
+import React from "react";
+import { InputCompOne } from "..";
+
+interface SpouseDetailsProps {
+  inputValues: {
+    spouseBVN: string;
+  };
+  handleChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+  handleInput: (e: React.FormEvent<HTMLInputElement>) => void;
+  inputRef: React.RefObject<HTMLInputElement>;
+}
+
+const SpouseDetails: React.FC<SpouseDetailsProps> = ({
+  inputValues,
+  handleChange,
+  handleInput,
+  inputRef,
+}) => {
+  return (
+    <>
+      <div className="w-full rounded py-3 bg-[#5C2684] px-5 mt-5">
+        <p className="text-base text-[#FBB700] tracking-[3%] font-extrabold w-fit">
+          SPOUSE DETAILS ( If not applicable, please move to the next stage )
+        </p>
+      </div>
+      <div className="mt-8 grid grid-cols-2">
+        <div className="flex flex-col gap-4 max-w-[15.6875rem]">
+          <InputCompOne
+            parentClass="max-w-[20.3125rem]"
+            label="BVN"
+            name="firstName"
+            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}
+            onChange={handleChange}
+            onInput={handleInput}
+            ref={inputRef}
+          />
+        </div>
+      </div>
+    </>
+  );
+};
+
+export default SpouseDetails;