130 lines
4.6 KiB
TypeScript
130 lines
4.6 KiB
TypeScript
import React from "react";
|
|
import { Button, InputCompOne } from "..";
|
|
|
|
interface SliderProps {
|
|
handleSliderChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
|
|
value: number;
|
|
}
|
|
|
|
interface LoanAmountProps {
|
|
handleNextStep: any;
|
|
}
|
|
|
|
const LoanAmountComp: React.FC<LoanAmountProps> = ({ handleNextStep }) => {
|
|
const [value, setValue] = React.useState(6);
|
|
|
|
const handleSliderChange = (e: any) => {
|
|
setValue(e.target.value);
|
|
};
|
|
|
|
return (
|
|
<>
|
|
<div className="flex justify-between items-center w-full mt-8 mb-[2.8125rem]">
|
|
<h1 className="font-semibold text-[38px] text-[#5C2684] my-[8px]">
|
|
Loan Amount
|
|
</h1>
|
|
<div className="flex flex-col gap-[7px]">
|
|
<p className="font-extrabold tracking-[3%] text-[#FBB700] underline">
|
|
For more enquiries and support
|
|
</p>
|
|
<p className="font-extrabold tracking-[3%] text-[#5A5A5A]">
|
|
Call: 09099000000
|
|
</p>
|
|
<p className="font-extrabold tracking-[3%] text-[#5A5A5A]">
|
|
Email: fcmbloan@support.com
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div className="flex flex-col gap-[45px] justify-center ml-[40px] mb-[40px]">
|
|
<InputCompOne
|
|
parentClass="max-w-[29.4375rem] w-full"
|
|
label="Your Monthly Salary*"
|
|
name="salary"
|
|
parentInputClass="w-full"
|
|
labelClass="font-bold text-[18px] leading-[21.7808px] tracking-[2%] text-[#5C2684] mb-[2px]"
|
|
input
|
|
inputClass="w-full h-[51px] bg-[#EFEFEF] rounded-[6px] placeholder:text-green-600 placeholder:font-bold px-4"
|
|
placeholder="150,000"
|
|
/>
|
|
|
|
<div className="w-full border-[.1875rem] rounded-xl border-black min-h-[884px] py-4 px-8 max-w-[784px]">
|
|
<p className="leading-[22px] tracking-[3%] text-[#5C2684] w-[729px] mb-[2.625rem]">
|
|
The maximum amount you can apply for on this offer is based on the
|
|
information you shared with us in your loan application. We have
|
|
made this offer to suit your monthly remuneration and to enable you
|
|
pay your loan on-time
|
|
</p>
|
|
<InputCompOne
|
|
parentClass="max-w-[45.8125rem] w-full mb-3"
|
|
label="How much do you want to apply for?"
|
|
name="loan"
|
|
parentInputClass="w-full"
|
|
labelClass="font-bold text-[18px] leading-[21.7808px] tracking-[2%] text-[#5C2684] mb-[2px]"
|
|
input
|
|
inputClass="w-full h-[51px] bg-[#EFEFEF] rounded-[6px] placeholder:text-green-600 placeholder:font-bold px-9"
|
|
placeholder="350,000"
|
|
/>
|
|
<div className="flex items-center justify-between w-full">
|
|
<div className=" h-[68px] flex flex-col py-1 px-[13px] shadow-md text-[#5C2684]">
|
|
<span>Minimum Offer:</span>
|
|
<p>
|
|
<b>N</b>100,000
|
|
</p>
|
|
</div>
|
|
|
|
<div className="h-[68px] flex flex-col py-1 px-[13px] shadow-md text-[#5C2684]">
|
|
<span>Maximum Offer:</span>
|
|
<p>
|
|
<b>N</b>500,000
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<Slider handleSliderChange={handleSliderChange} value={value} />
|
|
|
|
<div className="w-full flex items-center justify-center flex-col">
|
|
<div className="w-[279px] h-[130px] mb-[76px] flex items-center justify-center flex-col">
|
|
<p className="text-[#FBB700]">Your Monthly Repayment</p>
|
|
<p>N</p>
|
|
</div>
|
|
<Button
|
|
className="max-w-[462px] w-full bg-[#5C2684] rounded h-[2.75rem]"
|
|
text="Submit"
|
|
type="button"
|
|
onClick={handleNextStep}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default LoanAmountComp;
|
|
|
|
const Slider: React.FC<SliderProps> = ({ handleSliderChange, value }) => {
|
|
return (
|
|
<div className="flex flex-col items-start mt-11 mb-16">
|
|
<p className="text-lg font-semibold">For how many months?</p>
|
|
<div className="w-full">
|
|
<input
|
|
type="range"
|
|
min="6"
|
|
max="24"
|
|
value={value}
|
|
onChange={handleSliderChange}
|
|
className="slider w-full h-2 bg-gray-300 rounded-lg appearance-none cursor-pointer"
|
|
style={{
|
|
background: `linear-gradient(90deg, #6B21A8 ${
|
|
((value - 6) / 18) * 100
|
|
}%, #D1D5DB ${((value - 6) / 18) * 100}%)`,
|
|
}}
|
|
/>
|
|
</div>
|
|
<div className="mt-4 text-lg font-semibold text-gray-700 w-full flex items-center text-center justify-center">
|
|
{value} months
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|