84 lines
3.2 KiB
TypeScript
84 lines
3.2 KiB
TypeScript
import { useRef, useState } from "react";
|
|
import Link from "next/link";
|
|
import { Splide, SplideTrack, SplideSlide } from "@splidejs/react-splide";
|
|
import Section from "@/components/Section";
|
|
import Image from "@/components/Image";
|
|
|
|
import { benefits } from "@/mocks/benefits";
|
|
|
|
type BenefitsProps = {};
|
|
|
|
const Benefits = ({}: BenefitsProps) => {
|
|
const [activeIndex, setActiveIndex] = useState<number>(0);
|
|
|
|
const ref = useRef<any>(null);
|
|
|
|
const handleClick = (index: number) => {
|
|
setActiveIndex(index);
|
|
ref.current?.go(index);
|
|
};
|
|
|
|
return (
|
|
<Section className="overflow-hidden">
|
|
<div className="container relative z-2">
|
|
<Splide
|
|
className="splide-benefits splide-visible max-w-[16rem] md:max-w-none"
|
|
options={{
|
|
mediaQuery: "min",
|
|
pagination: false,
|
|
arrows: false,
|
|
gap: "1.5rem",
|
|
breakpoints: {
|
|
768: {
|
|
destroy: true,
|
|
},
|
|
},
|
|
}}
|
|
onMoved={(e, newIndex) => setActiveIndex(newIndex)}
|
|
hasTrack={false}
|
|
ref={ref}
|
|
>
|
|
<SplideTrack>
|
|
{benefits.map((item) => (
|
|
<SplideSlide key={item.id}>
|
|
<div className="flex items-center mb-6">
|
|
<Image
|
|
src={item.iconUrl}
|
|
width={48}
|
|
height={48}
|
|
alt={item.title}
|
|
/>
|
|
</div>
|
|
<h5 className="h6 mb-4">{item.title}</h5>
|
|
<p className="body-2 text-n-3">{item.text}</p>
|
|
</SplideSlide>
|
|
))}
|
|
</SplideTrack>
|
|
</Splide>
|
|
<div className="flex mt-12 -mx-2 md:hidden">
|
|
{benefits.map((item, index) => (
|
|
<button
|
|
className="relative w-6 h-6 mx-2"
|
|
onClick={() => handleClick(index)}
|
|
key={item.id}
|
|
>
|
|
<span
|
|
className={`absolute inset-0 bg-conic-gradient rounded-full transition-opacity ${
|
|
index === activeIndex
|
|
? "opacity-100"
|
|
: "opacity-0"
|
|
}`}
|
|
></span>
|
|
<span className="absolute inset-0.25 bg-n-8 rounded-full">
|
|
<span className="absolute inset-2 bg-n-1 rounded-full"></span>
|
|
</span>
|
|
</button>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</Section>
|
|
);
|
|
};
|
|
|
|
export default Benefits;
|