Ebube
50 lines
1.5 KiB
TypeScript
50 lines
1.5 KiB
TypeScript
import React from "react";
|
|
import { InputCompOne } from "..";
|
|
|
|
interface SpouseDetailsProps {
|
|
inputValues: {
|
|
spouseBVN: string;
|
|
};
|
|
handleChange: (e: React.FormEvent<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="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.spouseBVN}
|
|
onChange={handleChange}
|
|
onInput={handleInput}
|
|
ref={inputRef}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default SpouseDetails;
|