Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 | 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x | "use client";
import { Swiper, SwiperSlide } from "swiper/react";
import { Navigation } from "swiper/modules";
import type { Swiper as SwiperClass } from "swiper";
import { useCallback, useRef } from "react";
import "swiper/css/navigation";
import "swiper/css";
import Image from "next/image";
import { usePreviewSlider } from "@/contexts";
import { ArrowIcon, CloseIcon } from "@/components/ui/icons";
import IconButton from "../IconButton";
import { useAppSelector } from "@/redux/store";
export default function PreviewSliderModal() {
const { closePreviewModal, isModalPreviewOpen } = usePreviewSlider();
const sliderRef = useRef<SwiperClass | null>(null);
// Get product data from Redux store
const product = useAppSelector((state) => state.productDetailsReducer.value);
const handlePrev = useCallback(() => {
if (!sliderRef.current) return;
sliderRef.current.slidePrev();
}, []);
const handleNext = useCallback(() => {
if (!sliderRef.current) return;
sliderRef.current.slideNext();
}, []);
return (
<div
className={`preview-slider w-full h-screen z-999999 inset-0 flex justify-center items-center bg-[#000000F2] bg-opacity-70 ${isModalPreviewOpen ? "fixed" : "hidden"
}`}
>
<IconButton
onClick={closePreviewModal}
ariaLabel="Close modal"
className="absolute top-0 right-0 sm:top-6 sm:right-6 flex items-center justify-center w-10 h-10 rounded-full ease-in duration-150 text-white hover:text-meta-5 z-10"
>
<CloseIcon />
</IconButton>
<div>
<IconButton
onClick={handlePrev}
ariaLabel="Previous slide"
className="rotate-180 absolute left-100 p-5 cursor-pointer z-10"
>
<ArrowIcon />
</IconButton>
<IconButton
onClick={handleNext}
ariaLabel="Next slide"
className="absolute right-100 p-5 cursor-pointer z-10"
>
<ArrowIcon />
</IconButton>
</div>
<Swiper
modules={[Navigation]}
slidesPerView={1}
spaceBetween={20}
loop={false}
onSwiper={(swiper) => {
sliderRef.current = swiper;
}}
>
{product?.imgs?.previews && product.imgs.previews.length > 0 ? (
product.imgs.previews.map((image, index) => (
<SwiperSlide key={index}>
<div className="flex justify-center items-center">
<Image
src={image}
alt={`${product.title || 'Product'} - Image ${index + 1}`}
width={450}
height={450}
className="object-contain"
/>
</div>
</SwiperSlide>
))
) : (
<SwiperSlide>
<div className="flex justify-center items-center">
<Image
src="/images/placeholder.jpg"
alt="No image available"
width={450}
height={450}
className="object-contain"
/>
</div>
</SwiperSlide>
)}
</Swiper>
</div>
);
} |