added Enter Btn

This commit was merged in pull request #23.
This commit is contained in:
Ebube
2024-03-20 14:00:17 +01:00
parent 1bd523c493
commit 97e6951685
+89 -82
View File
@@ -73,7 +73,7 @@ const BasicInfo: React.FC = () => {
parentInputClass="max-w-[224px] w-full" parentInputClass="max-w-[224px] w-full"
labelClass="font-bold text-[18px] leading-[21.78px] tracking-[2%] text-[#5C2684] mb-[2px]" labelClass="font-bold text-[18px] leading-[21.78px] tracking-[2%] text-[#5C2684] mb-[2px]"
select select
selectClass="w-full h-[36px] rounded-[12px]" selectClass="w-full h-[36px] rounded-[6px]"
selectOptions={titleOptions} selectOptions={titleOptions}
value={inputValues.title} value={inputValues.title}
onChange={handleChange} onChange={handleChange}
@@ -85,7 +85,7 @@ const BasicInfo: React.FC = () => {
parentInputClass="max-w-[224px] w-full" parentInputClass="max-w-[224px] w-full"
labelClass="font-bold text-[18px] leading-[21.78px] tracking-[2%] text-[#5C2684] mb-[2px]" labelClass="font-bold text-[18px] leading-[21.78px] tracking-[2%] text-[#5C2684] mb-[2px]"
select select
selectClass="w-full h-[36px] rounded-[12px]" selectClass="w-full h-[36px] rounded-[6px]"
selectOptions={maritalStatusOptions} selectOptions={maritalStatusOptions}
value={inputValues.marital} value={inputValues.marital}
onChange={handleChange} onChange={handleChange}
@@ -98,7 +98,7 @@ const BasicInfo: React.FC = () => {
parentInputClass="max-w-[224px] w-full" parentInputClass="max-w-[224px] w-full"
labelClass="font-bold text-[18px] leading-[21.78px] tracking-[2%] text-[#5C2684] mb-[2px]" labelClass="font-bold text-[18px] leading-[21.78px] tracking-[2%] text-[#5C2684] mb-[2px]"
select select
selectClass="w-full h-[36px] rounded-[12px]" selectClass="w-full h-[36px] rounded-[6px]"
selectOptions={[{ value: "", label: "Select" }]} selectOptions={[{ value: "", label: "Select" }]}
value={inputValues.agentId} value={inputValues.agentId}
onChange={handleChange} onChange={handleChange}
@@ -114,7 +114,7 @@ const BasicInfo: React.FC = () => {
placeholder="Enter your BVN" placeholder="Enter your BVN"
labelClass="font-bold text-[18px] leading-[21.78px] tracking-[2%] text-[#5C2684] mb-[2px] gap-[2px]" labelClass="font-bold text-[18px] leading-[21.78px] tracking-[2%] text-[#5C2684] mb-[2px] gap-[2px]"
input input
inputClass="w-full h-[36px] bg-[#EFEFEF] px-[2px] rounded-[12px]" inputClass="w-full h-[36px] bg-[#EFEFEF] px-[2px] rounded-[6px]"
value={inputValues.bvn} value={inputValues.bvn}
onChange={handleChange} onChange={handleChange}
onInput={handleInput} onInput={handleInput}
@@ -124,86 +124,93 @@ const BasicInfo: React.FC = () => {
</div> </div>
</div> </div>
{!hideOTPComponent ? ( {!hideOTPComponent ? (
<div className="flex justify-between items-center g4"> <div className="flex flex-col gap-5">
<div className="mt-8 max-w-[31.5rem] w-full"> <div className="flex justify-between items-center g4">
<div className="flex flex-col gap-3"> <div className="mt-8 max-w-[31.5rem] w-full">
<InputCompOne <div className="flex flex-col gap-3">
label="First Name" <InputCompOne
name="firstName" label="First Name"
parentInputClass="w-full" name="firstName"
labelClass="font-bold text-[18px] leading-[21.78px] tracking-[2%] text-[#5C2684] mb-[2px]" parentInputClass="w-full"
input labelClass="font-bold text-[18px] leading-[21.78px] tracking-[2%] text-[#5C2684] mb-[2px]"
inputClass="w-full h-[36px] bg-[#EFEFEF] px-[2px] rounded-[12px]" input
value={inputValues.firstName} inputClass="w-full h-[36px] bg-[#EFEFEF] px-[2px] rounded-[6px]"
onChange={handleChange} value={inputValues.firstName}
onInput={handleInput} onChange={handleChange}
ref={inputRef} onInput={handleInput}
/> ref={inputRef}
<InputCompOne />
label="Phone Number" <InputCompOne
name="phone" label="Phone Number"
parentInputClass="w-full" name="phone"
labelClass="font-bold text-[18px] leading-[21.78px] tracking-[2%] text-[#5C2684] mb-[2px]" parentInputClass="w-full"
input labelClass="font-bold text-[18px] leading-[21.78px] tracking-[2%] text-[#5C2684] mb-[2px]"
inputClass="w-full h-[36px] bg-[#EFEFEF] px-[2px] rounded-[12px]" input
value={inputValues.phone} inputClass="w-full h-[36px] bg-[#EFEFEF] px-[2px] rounded-[6px]"
onChange={handleChange} value={inputValues.phone}
onInput={handleInput} onChange={handleChange}
ref={inputRef} onInput={handleInput}
/> ref={inputRef}
<InputCompOne />
label="Email Address" <InputCompOne
name="email" label="Email Address"
parentInputClass="w-full" name="email"
labelClass="font-bold text-[18px] leading-[21.78px] tracking-[2%] text-[#5C2684] mb-[2px]" parentInputClass="w-full"
input labelClass="font-bold text-[18px] leading-[21.78px] tracking-[2%] text-[#5C2684] mb-[2px]"
inputClass="w-full h-[36px] bg-[#EFEFEF] px-[2px] rounded-[12px]" input
value={inputValues.email} inputClass="w-full h-[36px] bg-[#EFEFEF] px-[2px] rounded-[6px]"
onChange={handleChange} value={inputValues.email}
onInput={handleInput} onChange={handleChange}
ref={inputRef} 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="surname"
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-[6px] px-3"
value={inputValues.surname}
onChange={handleChange}
onInput={handleInput}
ref={inputRef}
/>
<InputCompOne
label="Date of Birth"
name="dob"
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-[6px] px-3"
value={inputValues.dob}
onChange={handleChange}
onInput={handleInput}
ref={inputRef}
/>
<InputCompOne
label="Second Name"
name="secondName"
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-[6px] px-3"
value={inputValues.secondName}
onChange={handleChange}
onInput={handleInput}
ref={inputRef}
/>
</div>
</div> </div>
</div> </div>
<div className="mt-8 max-w-[31.5rem] w-full"> <div className="w-full flex justify-end">
<div className="flex flex-col gap-3"> <button className="w-full max-w-[15.25rem] h-[36px] rounded bg-[#FBB700] rounded-2 px-4 text-[18px] text-[#282828] font-semibold disabled:text-[#282828] disabled:text-opacity-50">
<InputCompOne Enter
label="Surname" </button>
name="surname"
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={inputValues.surname}
onChange={handleChange}
onInput={handleInput}
ref={inputRef}
/>
<InputCompOne
label="Date of Birth"
name="dob"
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={inputValues.dob}
onChange={handleChange}
onInput={handleInput}
ref={inputRef}
/>
<InputCompOne
label="Second Name"
name="secondName"
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={inputValues.secondName}
onChange={handleChange}
onInput={handleInput}
ref={inputRef}
/>
</div>
</div> </div>
</div> </div>
) : null} ) : null}