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.
100 lines
2.9 KiB
100 lines
2.9 KiB
"use client";
|
|
|
|
import Image from "next/image";
|
|
import { SliderHeader } from "./slider-header";
|
|
import type { GenderAnswer, SliderSlideProps } from "./slider-slide";
|
|
|
|
type GenderOption = {
|
|
id: GenderAnswer;
|
|
label: string;
|
|
alt: string;
|
|
enabledSrc: string;
|
|
disabledSrc: string;
|
|
};
|
|
|
|
const GENDER_OPTIONS: GenderOption[] = [
|
|
{
|
|
id: "man",
|
|
label: "Man",
|
|
alt: "man",
|
|
enabledSrc: "/assets/images/Group 27033.svg",
|
|
disabledSrc: "/assets/images/disabled Group 27033.svg",
|
|
},
|
|
{
|
|
id: "woman",
|
|
label: "Woman",
|
|
alt: "woman",
|
|
enabledSrc: "/assets/images/enabled Group 27032.svg",
|
|
disabledSrc: "/assets/images/Group 27032.svg",
|
|
},
|
|
];
|
|
|
|
type SliderSlideThreeProps = SliderSlideProps & {
|
|
selectedGender: GenderAnswer;
|
|
onGenderChange: (gender: GenderAnswer) => void;
|
|
};
|
|
|
|
export function SliderSlideThree({
|
|
index,
|
|
totalSteps,
|
|
selectedGender,
|
|
onGenderChange,
|
|
}: SliderSlideThreeProps) {
|
|
return (
|
|
<section
|
|
aria-label={`Slide ${index + 1}`}
|
|
className="flex h-full min-h-0 w-full shrink-0 flex-col justify-between"
|
|
>
|
|
<SliderHeader index={index} totalSteps={totalSteps} title="Select your gender" />
|
|
|
|
<div className="flex w-full items-center justify-evenly">
|
|
{GENDER_OPTIONS.map((option) => {
|
|
const isSelected = option.id === selectedGender;
|
|
|
|
return (
|
|
<button
|
|
key={option.id}
|
|
type="button"
|
|
aria-pressed={isSelected}
|
|
className="group flex flex-col items-center outline-none"
|
|
onClick={() => onGenderChange(option.id)}
|
|
>
|
|
<span className="relative block h-[83px] w-[83px]">
|
|
<Image
|
|
src={option.disabledSrc}
|
|
alt=""
|
|
aria-hidden="true"
|
|
width={83}
|
|
height={83}
|
|
className={[
|
|
"absolute inset-0 h-full w-full transition-[opacity,transform] duration-300 ease-out",
|
|
isSelected ? "scale-95 opacity-0" : "scale-100 opacity-100",
|
|
].join(" ")}
|
|
/>
|
|
<Image
|
|
src={option.enabledSrc}
|
|
alt={option.alt}
|
|
width={83}
|
|
height={83}
|
|
className={[
|
|
"absolute inset-0 h-full w-full transition-[opacity,transform] duration-300 ease-out",
|
|
isSelected ? "scale-100 opacity-100" : "scale-95 opacity-0",
|
|
].join(" ")}
|
|
/>
|
|
</span>
|
|
<p
|
|
className={[
|
|
"mt-2 text-center group-14 font-semibold transition-colors duration-300 ease-out",
|
|
isSelected ? "text-[#FF6175]" : "text-[#111111]",
|
|
].join(" ")}
|
|
>
|
|
{option.label}
|
|
</p>
|
|
</button>
|
|
);
|
|
})}
|
|
</div>
|
|
<div className="h-28" />
|
|
</section>
|
|
);
|
|
}
|