You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
96 lines
3.4 KiB
96 lines
3.4 KiB
"use client";
|
|
|
|
import type {
|
|
RegistrationAnswer,
|
|
SliderSlideProps,
|
|
} from "@/components/sliders/slider-slide";
|
|
|
|
type SliderSlideFourProps = SliderSlideProps & {
|
|
selectedRegistration: RegistrationAnswer;
|
|
onRegistrationChange: (registration: RegistrationAnswer) => void;
|
|
};
|
|
|
|
export function SliderSlideFour({
|
|
index,
|
|
selectedRegistration,
|
|
onRegistrationChange,
|
|
}: SliderSlideFourProps) {
|
|
const options = [
|
|
{ id: "self", label: "Registering for myself" },
|
|
{ id: "other", label: "Registering for someone else" },
|
|
] as const;
|
|
|
|
return (
|
|
<section
|
|
aria-label={`Slide ${index + 1}`}
|
|
className="flex h-full min-h-0 w-full shrink-0 flex-col"
|
|
>
|
|
<div className="min-h-0 flex-1 overflow-y-auto pb-28">
|
|
<div className="text-center">
|
|
<p className="text-[#747474] text-xs font-semibold">Submit Process</p>
|
|
<p className="text-[#111111] font-bold">
|
|
{index + 1}/4 terms & conditions
|
|
</p>
|
|
</div>
|
|
<div className="bg-[#F14B46]/10 py-2.5 px-3.5 border border-[#F14B46] rounded-xl mt-8">
|
|
<p className="text-[#F14B46] text-xs font-semibold text-center">
|
|
Read the terms and conditions carefully so that you don't run into
|
|
any problems in the next process - reading this section is
|
|
mandatory.
|
|
</p>
|
|
</div>
|
|
<div className="flex min-h-[calc(100dvh-520px)] items-center justify-center pt-6">
|
|
<div className="w-full max-w-[440px] space-y-4">
|
|
{options.map((option) => {
|
|
const isSelected = option.id === selectedRegistration;
|
|
|
|
return (
|
|
<button
|
|
key={option.id}
|
|
type="button"
|
|
aria-pressed={isSelected}
|
|
className={[
|
|
"flex w-full items-center gap-3 rounded-[18px] px-4 py-5 text-left transition-colors",
|
|
isSelected
|
|
? "bg-[#F4435C] text-white"
|
|
: "bg-[#ECE9E9] text-[#2A2A2A]",
|
|
].join(" ")}
|
|
onClick={() => onRegistrationChange(option.id)}
|
|
>
|
|
<span
|
|
className={[
|
|
"flex h-6 w-6 shrink-0 items-center justify-center rounded-full border transition-colors",
|
|
isSelected
|
|
? "border-white bg-white text-[#F4435C]"
|
|
: "border-[#9B9B9B] bg-transparent text-transparent",
|
|
].join(" ")}
|
|
aria-hidden="true"
|
|
>
|
|
<svg
|
|
viewBox="0 0 16 16"
|
|
className="h-3.5 w-3.5"
|
|
fill="none"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
aria-hidden="true"
|
|
>
|
|
<path
|
|
d="M3.5 8.5 6.5 11.5 12.5 5.5"
|
|
stroke="currentColor"
|
|
strokeWidth="2"
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
/>
|
|
</svg>
|
|
</span>
|
|
<span className="text-[15px] font-semibold sm:text-[16px]">
|
|
{option.label}
|
|
</span>
|
|
</button>
|
|
);
|
|
})}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|