100 lines
4.0 KiB
TypeScript
100 lines
4.0 KiB
TypeScript
import React from "react";
|
||
import { InputCompOne } from "..";
|
||
|
||
const EmploymentDetails: React.FC = () => {
|
||
return (
|
||
<>
|
||
<div className="w-full rounded py-3 bg-[#5C2684] px-5">
|
||
<p className="text-base text-[#FBB700] tracking-[3%] font-extrabold w-fit">
|
||
EMPLOYMENT DETAILS
|
||
</p>
|
||
</div>
|
||
|
||
<div className="flex flex-col gap-4">
|
||
<InputCompOne
|
||
parentClass="max-w-[17.9375rem] w-full"
|
||
label="Job Title"
|
||
name="jobTitle"
|
||
parentInputClass="w-full"
|
||
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]"
|
||
/>
|
||
<div className="flex items-center gap-[3.6875rem]">
|
||
<InputCompOne
|
||
parentClass="max-w-[23.1875rem] w-full"
|
||
label="Employer’s Name"
|
||
name="employerName"
|
||
parentInputClass="w-full"
|
||
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]"
|
||
/>
|
||
<InputCompOne
|
||
parentClass="max-w-[23.1875rem] w-full"
|
||
label="Employer’s Official Email"
|
||
name="employerOfficialEmail"
|
||
parentInputClass="w-full"
|
||
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]"
|
||
/>
|
||
</div>
|
||
<div className="flex items-center gap-[9rem]">
|
||
<InputCompOne
|
||
parentClass="max-w-[17.9375rem] w-full"
|
||
label="Resumption Date"
|
||
name="resumptionDate"
|
||
parentInputClass="w-full"
|
||
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]"
|
||
/>
|
||
<InputCompOne
|
||
parentClass="max-w-[17.9375rem] w-full"
|
||
label="Employee ID."
|
||
name="employeeID"
|
||
labelSpan="Upload your work ID"
|
||
labelSpanClass="text-[11px] text-[#7a7373]"
|
||
parentInputClass="w-full"
|
||
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]"
|
||
/>
|
||
</div>
|
||
<div className="flex items-center gap-[3.6875rem]">
|
||
<InputCompOne
|
||
parentClass="max-w-[23.1875rem] w-full"
|
||
label="Salary ( Gross annual income )"
|
||
name="salaryGross"
|
||
parentInputClass="w-full"
|
||
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]"
|
||
/>
|
||
<InputCompOne
|
||
parentClass="max-w-[23.1875rem] w-full"
|
||
label="Salary ( Net monthly Income )"
|
||
name="salaryNet"
|
||
parentInputClass="w-full"
|
||
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]"
|
||
/>
|
||
</div>
|
||
<InputCompOne
|
||
parentClass="max-w-[20.3125rem]"
|
||
label="Salary Payment Date"
|
||
name="salary-payment-date"
|
||
parentInputClass="w-full"
|
||
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]"
|
||
/>
|
||
</div>
|
||
</>
|
||
);
|
||
};
|
||
|
||
export default EmploymentDetails;
|