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.
90 lines
3.4 KiB
90 lines
3.4 KiB
"use client";
|
|
|
|
import NoticeBox from "./notice-box";
|
|
import { SliderHeader } from "./slider-header";
|
|
import type { RegistrationAnswer, SliderSlideProps } from "./slider-slide";
|
|
|
|
type SliderSlideFourProps = SliderSlideProps & {
|
|
selectedRegistration: RegistrationAnswer;
|
|
onRegistrationChange: (registration: RegistrationAnswer) => void;
|
|
};
|
|
|
|
export function SliderSlideFour({
|
|
index,
|
|
totalSteps,
|
|
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">
|
|
<SliderHeader index={index} totalSteps={totalSteps} title="Registration Type" />
|
|
<NoticeBox className="mt-8" align="justify">
|
|
You can register both for yourself and for your loved ones, but
|
|
obtaining the explicit consent and permission of the person you are
|
|
creating the profile for is mandatory. To ensure accuracy, it is best
|
|
to let the individual complete the subsequent steps themselves.
|
|
Remember that all matches are introduced with absolute privacy and
|
|
strictly based on the information you provide.
|
|
</NoticeBox>
|
|
<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="group-14 font-semibold">{option.label}</span>
|
|
</button>
|
|
);
|
|
})}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|