DigiFi/digifi-www
1
0
Fork 0
Code Issues Pull Requests Releases Activity

Added social links to env and added hero text to the pages

Browse Source
This commit is contained in:
Ebube
2024-03-20 13:12:08 +01:00
parent ee94a59f75
commit 32f2a358b2
14 changed files with 230 additions and 92 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/GetStarted/BasicInfo.tsx
+155 -59
View File
@@ -7,6 +7,7 @@ interface Option {
}
const BasicInfo: React.FC = () => {
const [hideOTPComponent, setHideOTPComponent] = React.useState<boolean>(true);
const inputRef = useRef<HTMLInputElement>(null);
// Array for marital status options
@@ -33,69 +34,164 @@ const BasicInfo: React.FC = () => {
};
const handleInput = (e: React.FormEvent<HTMLInputElement>) => {
// Handle input events
console.log(e);
if (name === "bvn") {
const regex = /^[0-9]+$/;
if (regex.test(value)) {
if (value?.length == 10) {
setHideOTPComponent(false);
// secondInputRef.current?.focus();
} else setHideOTPComponent(true);
} else {
console.log("object not found");
}
}
};
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 className="mt-8 max-w-[31.5rem]">
<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] rounded-[12px]"
selectOptions={titleOptions}
value=""
onChange={handleChange}
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] rounded-[12px]"
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] rounded-[12px]"
selectOptions={[{ value: "", label: "Select" }]}
value=""
onChange={handleChange}
onInput={handleInput}
ref={inputRef}
/>
<InputCompOne
label="BVN"
name="bvn"
parentInputClass=" 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] rounded-[12px]"
value=""
onChange={handleChange}
onInput={handleInput}
ref={inputRef}
/>
</div>
</div>
</div>
{!hideOTPComponent ? (
<div className="flex justify-between items-center g4">
<div className="mt-8 max-w-[31.5rem] w-full">
<div className="flex flex-col gap-3">
<InputCompOne
label="First Name"
name="title"
parentInputClass="w-full"
labelClass="font-bold text-[18px] leading-[21.78px] tracking-[2%] text-[#5C2684] mb-[2px]"
input
inputClass="w-full h-[36px] bg-[#EFEFEF] px-[2px] rounded-[12px]"
value=""
onChange={handleChange}
onInput={handleInput}
ref={inputRef}
/>
<InputCompOne
label="Phone Number"
name="title"
parentInputClass="w-full"
labelClass="font-bold text-[18px] leading-[21.78px] tracking-[2%] text-[#5C2684] mb-[2px]"
input
inputClass="w-full h-[36px] bg-[#EFEFEF] px-[2px] rounded-[12px]"
value=""
onChange={handleChange}
onInput={handleInput}
ref={inputRef}
/>
<InputCompOne
label="Email Address"
name="title"
parentInputClass="w-full"
labelClass="font-bold text-[18px] leading-[21.78px] tracking-[2%] text-[#5C2684] mb-[2px]"
input
inputClass="w-full h-[36px] bg-[#EFEFEF] px-[2px] rounded-[12px]"
value=""
onChange={handleChange}
onInput={handleInput}
ref={inputRef}
/>
</div>
</div>
<div className="mt-8 max-w-[31.5rem] w-full">
<div className="flex flex-col gap-3">
<InputCompOne
label="Surname"
name="title"
parentInputClass="w-full"
labelClass="font-bold text-[18px] leading-[21.78px] tracking-[2%] text-[#5C2684] mb-[2px]"
input
inputClass="w-full h-[36px] bg-[#EFEFEF] px-[2px] rounded-[12px] px-3"
value=""
onChange={handleChange}
onInput={handleInput}
ref={inputRef}
/>
<InputCompOne
label="Date of Birth"
name="title"
parentInputClass="w-full"
labelClass="font-bold text-[18px] leading-[21.78px] tracking-[2%] text-[#5C2684] mb-[2px]"
input
inputClass="w-full h-[36px] bg-[#EFEFEF] px-[2px] rounded-[12px] px-3"
value=""
onChange={handleChange}
onInput={handleInput}
ref={inputRef}
/>
<InputCompOne
label="Second Name"
name="title"
parentInputClass="w-full"
labelClass="font-bold text-[18px] leading-[21.78px] tracking-[2%] text-[#5C2684] mb-[2px]"
input
inputClass="w-full h-[36px] bg-[#EFEFEF] px-[2px] rounded-[12px] px-3"
value=""
onChange={handleChange}
onInput={handleInput}
ref={inputRef}
/>
</div>
</div>
</div>
) : null}
</>
);
};