79 lines
2.1 KiB
TypeScript
79 lines
2.1 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 2xl:-mx-[1.667vw] md:max-2xl:-mx-6 -mx-4 2xl:px-[1.667vw] md:max-2xl:px-6 px-4 overflow-hidden"
|
|
{...handlers}
|
|
>
|
|
<div
|
|
className="flex flex-nowrap 2xl:gap-[1.111vw] gap-4 transition-transform duration-300"
|
|
style={{
|
|
transform: `translateX(calc(${-current} * 100% + ${-current} * ${
|
|
innerWidth < 1440 ? "16px" : "1.111vw"
|
|
}))`,
|
|
}}
|
|
>
|
|
{srcs.map((src) => (
|
|
<img
|
|
key={src}
|
|
src={src}
|
|
className="2xl:rounded-[1.111vw] rounded-2xl shrink-0 select-none pointer-events-none"
|
|
alt=""
|
|
/>
|
|
))}
|
|
</div>
|
|
<Button
|
|
onlyIcon
|
|
size="small"
|
|
variant="secondary"
|
|
disabled={current === 0}
|
|
className="absolute 2xl:left-[2.778vw] left-10 top-1/2 -translate-y-1/2"
|
|
onClick={handlePrev}
|
|
>
|
|
<span className="2xl:size-[1.389vw] size-5">
|
|
<ArrowLeftIcon />
|
|
</span>
|
|
</Button>
|
|
<Button
|
|
onlyIcon
|
|
size="small"
|
|
variant="secondary"
|
|
disabled={current === srcs.length - 1}
|
|
className="absolute 2xl:right-[2.778vw] right-10 top-1/2 -translate-y-1/2"
|
|
onClick={handleNext}
|
|
>
|
|
<span className="2xl:size-[1.389vw] size-5">
|
|
<ArrowRightIcon />
|
|
</span>
|
|
</Button>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default AmentitiesContentSlider;
|