115 lines
3.7 KiB
TypeScript
115 lines
3.7 KiB
TypeScript
/* eslint-disable react-hooks/exhaustive-deps */
|
|
import { useSwipeable } from "react-swipeable";
|
|
import { useLayoutEffect, useRef, useState } from "react";
|
|
import { Image } from "../../../types/image";
|
|
import Button from "../../Button";
|
|
import LeftArrowSliderIcon from "../../icons/LeftArrowSliderIcon";
|
|
import RightArrowSliderIcon from "../../icons/RightArrowSliderIcon";
|
|
|
|
const images: Image[] = [
|
|
{ id: "1", src: "/images/company/slider/1.png" },
|
|
{ id: "2", src: "/images/company/slider/2.png" },
|
|
{ id: "3", src: "/images/company/slider/3.png" },
|
|
];
|
|
|
|
const getGapOffset = (screenWidth: number) => {
|
|
if (screenWidth > 1600) return 45;
|
|
if (screenWidth > 1280) return 24;
|
|
if (screenWidth > 640) return 16;
|
|
return 16;
|
|
};
|
|
|
|
const ZoneSlider = () => {
|
|
const [selectedImageIndex, setSelectedImageIndex] = useState(-1);
|
|
const [rightImageOffset, setRightImageOffset] = useState("");
|
|
const [imageWidth, setImageWidth] = useState(0);
|
|
const imageRef = useRef<HTMLImageElement>(null);
|
|
|
|
useLayoutEffect(() => {
|
|
if (!imageRef.current?.src) return;
|
|
const width = imageRef.current.width;
|
|
setImageWidth(width);
|
|
}, [imageRef.current, window.innerWidth]);
|
|
|
|
useLayoutEffect(() => {
|
|
const screenWidth = window.innerWidth;
|
|
const gapOffset = getGapOffset(screenWidth);
|
|
|
|
const _rightImageOffset = `${
|
|
// -24 + (selectedImageIndex + 1) * (imageWidth + gapOffset)
|
|
-57.5 + (selectedImageIndex + 1) * (imageWidth + gapOffset)
|
|
}px`;
|
|
|
|
setRightImageOffset(_rightImageOffset);
|
|
}, [imageWidth, selectedImageIndex, window.innerWidth]);
|
|
|
|
const handlers = useSwipeable({
|
|
onSwipedLeft: next,
|
|
onSwipedRight: prev,
|
|
trackMouse: true,
|
|
});
|
|
|
|
function next() {
|
|
const lastIndex = images.length - 3;
|
|
|
|
if (selectedImageIndex === lastIndex + 1) return;
|
|
setSelectedImageIndex((prev) => prev + 1);
|
|
}
|
|
|
|
function prev() {
|
|
if (selectedImageIndex === -1) return;
|
|
setSelectedImageIndex((prev) => prev - 1);
|
|
}
|
|
|
|
return (
|
|
<div className="flex flex-col gap-6 pt-[1747px] pb-[96px]" {...handlers}>
|
|
{/* <div className="flex flex-col gap-6 pt-[1108.5px]" {...handlers}> */}
|
|
<div className="relative col-span-full overflow-x-hidden flex flex-col h-[892px] border-b">
|
|
{/* <div className="relative col-span-full overflow-x-hidden flex flex-col h-[372px] "> */}
|
|
<div
|
|
className={`flex gap-4 w-full absolute h-full transition-all duration-300 ease-in-out select-none xl:px-0 px-4`}
|
|
style={{
|
|
right: `${rightImageOffset}`,
|
|
}}
|
|
>
|
|
{images.map((image) => (
|
|
<img
|
|
ref={imageRef}
|
|
src={image.src}
|
|
alt=""
|
|
key={image.id}
|
|
className="rounded-2xl sm:aspect-[6.6/3.7] object-cover pointer-events-none select-none"
|
|
/>
|
|
))}
|
|
</div>
|
|
<Button
|
|
isCircleRounded
|
|
onClick={prev}
|
|
icon={<LeftArrowSliderIcon />}
|
|
className="absolute text-[#73787C] top-[calc(50%-22px)] left-8 hidden sm:block"
|
|
/>
|
|
<Button
|
|
isCircleRounded
|
|
onClick={next}
|
|
icon={<RightArrowSliderIcon />}
|
|
className="absolute text-[#73787C] top-[calc(50%-22px)] right-8 hidden sm:block"
|
|
/>
|
|
</div>
|
|
<div className="self-center gap-[4px] sm:hidden flex zoom-280">
|
|
{images.map((image, index) => (
|
|
<div
|
|
key={image.id}
|
|
className={`transition-all duration-300 ease-in-out rounded-full h-[8px] ${
|
|
index - 1 === selectedImageIndex
|
|
? "w-[24px] bg-[#0D1922]"
|
|
: "w-[8px] bg-[#0D192266]"
|
|
}`}
|
|
></div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default ZoneSlider;
|