74 lines
1.9 KiB
TypeScript
74 lines
1.9 KiB
TypeScript
import { useState } from "react";
|
|
import { useSwipeable } from "react-swipeable";
|
|
import Button from "./ui/Button";
|
|
import ArrowLeftIcon from "./icons/ArrowLeftIcon";
|
|
import ArrowRightIcon from "./icons/ArrowRightIcon";
|
|
|
|
function AmentitiesContentSlider({ srcs }: { srcs: string[] }) {
|
|
const [current, setCurrent] = useState(0);
|
|
|
|
const handlers = useSwipeable({
|
|
onSwipedLeft: handleNext,
|
|
onSwipedRight: handlePrev,
|
|
preventScrollOnSwipe: true,
|
|
touchEventOptions: {
|
|
passive: false,
|
|
},
|
|
trackMouse: true,
|
|
});
|
|
|
|
function handlePrev() {
|
|
setCurrent((prev) => Math.max(0, prev - 1));
|
|
}
|
|
|
|
function handleNext() {
|
|
setCurrent((prev) => Math.min(srcs.length - 1, prev + 1));
|
|
}
|
|
|
|
return (
|
|
<div
|
|
className="relative -mx-[1.667vw] px-[1.667vw] overflow-hidden"
|
|
{...handlers}
|
|
>
|
|
<div
|
|
className="flex flex-nowrap gap-[1.111vw] transition-transform duration-300"
|
|
style={{
|
|
transform: `translateX(calc(${-current} * 100% + ${-current} * 1.111vw))`,
|
|
}}
|
|
>
|
|
{srcs.map((src) => (
|
|
<img
|
|
src={src}
|
|
className="rounded-[1.111vw] shrink-0 select-none pointer-events-none"
|
|
alt=""
|
|
/>
|
|
))}
|
|
</div>
|
|
<Button
|
|
onlyIcon
|
|
variant="secondary"
|
|
disabled={current === 0}
|
|
className="absolute left-[2.778vw] top-1/2 -translate-y-1/2"
|
|
onClick={handlePrev}
|
|
>
|
|
<span className="2xl:w-[1.389vw] 2xl:h-[1.389vw] w-5 h-5">
|
|
<ArrowLeftIcon />
|
|
</span>
|
|
</Button>
|
|
<Button
|
|
onlyIcon
|
|
variant="secondary"
|
|
disabled={current === srcs.length - 1}
|
|
className="absolute right-[2.778vw] top-1/2 -translate-y-1/2"
|
|
onClick={handleNext}
|
|
>
|
|
<span className="2xl:w-[1.389vw] 2xl:h-[1.389vw] w-5 h-5">
|
|
<ArrowRightIcon />
|
|
</span>
|
|
</Button>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default AmentitiesContentSlider;
|