Ebube
103 lines
3.1 KiB
TypeScript
103 lines
3.1 KiB
TypeScript
import React, { useRef } from "react";
|
|
import InputCompOne from "../shared/InputCompOne";
|
|
|
|
interface Option {
|
|
value: string;
|
|
label: string;
|
|
}
|
|
|
|
const BasicInfo: React.FC = () => {
|
|
const inputRef = useRef<HTMLInputElement>(null);
|
|
|
|
// Array for marital status options
|
|
const maritalStatusOptions: Option[] = [
|
|
{ value: "", label: "Select" },
|
|
{ value: "single", label: "Single" },
|
|
{ value: "married", label: "Married" },
|
|
{ value: "divorced", label: "Divorced" },
|
|
{ value: "widowed", label: "Widowed" },
|
|
];
|
|
|
|
// Array for title options
|
|
const titleOptions: Option[] = [
|
|
{ value: "", label: "Select" },
|
|
{ value: "ms", label: "Ms" },
|
|
{ value: "mr", label: "Mr" },
|
|
{ value: "miss", label: "Miss" },
|
|
{ value: "mrs", label: "Mrs" },
|
|
];
|
|
|
|
const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
|
// Handle input value changes
|
|
console.log(e.target.value);
|
|
};
|
|
|
|
const handleInput = (e: React.FormEvent<HTMLInputElement>) => {
|
|
// Handle input events
|
|
console.log(e);
|
|
};
|
|
|
|
return (
|
|
<div className="mt-8">
|
|
<div className="flex flex-col gap-3">
|
|
<InputCompOne
|
|
label="Title"
|
|
name="title"
|
|
parentInputClass="max-w-[224px] w-full"
|
|
labelClass="font-bold text-[18px] leading-[21.78px] tracking-[2%] text-[#5C2684] mb-[2px]"
|
|
select
|
|
selectClass="w-full h-[36px]"
|
|
selectOptions={titleOptions}
|
|
value=""
|
|
onChange={handleChange}
|
|
onInput={handleInput}
|
|
ref={inputRef}
|
|
/>
|
|
<InputCompOne
|
|
label="Marital Status"
|
|
name="marital"
|
|
parentInputClass="max-w-[224px] w-full"
|
|
labelClass="font-bold text-[18px] leading-[21.78px] tracking-[2%] text-[#5C2684] mb-[2px]"
|
|
select
|
|
selectClass="w-full h-[36px]"
|
|
selectOptions={maritalStatusOptions}
|
|
value=""
|
|
onChange={handleChange}
|
|
onInput={handleInput}
|
|
ref={inputRef}
|
|
/>
|
|
<InputCompOne
|
|
label="Direct Sales Agent ID"
|
|
name="agentId"
|
|
parentInputClass="max-w-[224px] w-full"
|
|
labelClass="font-bold text-[18px] leading-[21.78px] tracking-[2%] text-[#5C2684] mb-[2px]"
|
|
select
|
|
selectClass="w-full h-[36px]"
|
|
selectOptions={[{ value: "", label: "Select" }]}
|
|
value=""
|
|
onChange={handleChange}
|
|
onInput={handleInput}
|
|
ref={inputRef}
|
|
/>
|
|
<InputCompOne
|
|
label="BVN"
|
|
name="bvn"
|
|
parentInputClass="max-w-[224px] w-full"
|
|
labelSpan="( To get your BVN, dial *565*0# )"
|
|
labelSpanClass="text-[11px] text-[#7a7373]"
|
|
placeholder="Enter your BVN"
|
|
labelClass="font-bold text-[18px] leading-[21.78px] tracking-[2%] text-[#5C2684] mb-[2px] gap-[2px]"
|
|
input
|
|
inputClass="w-full h-[36px] bg-[#EFEFEF] px-[2px]"
|
|
value=""
|
|
onChange={handleChange}
|
|
onInput={handleInput}
|
|
ref={inputRef}
|
|
/>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default BasicInfo;
|