74 lines
1.9 KiB
TypeScript
74 lines
1.9 KiB
TypeScript
"use client";
|
|
|
|
import { Maximize2, X } from "lucide-react";
|
|
import { useState } from "react";
|
|
|
|
export default function ProductGallery({
|
|
images,
|
|
title,
|
|
}: {
|
|
images: string[];
|
|
title: string;
|
|
}) {
|
|
const [activeImage, setActiveImage] = useState(images[0]);
|
|
const [lightboxOpen, setLightboxOpen] = useState(false);
|
|
|
|
return (
|
|
<>
|
|
<div className="product-gallery">
|
|
<button
|
|
className="product-gallery__main"
|
|
type="button"
|
|
onClick={() => setLightboxOpen(true)}
|
|
aria-label={`نمایش بزرگ تصویر ${title}`}
|
|
>
|
|
<img src={activeImage} alt={title} />
|
|
<span>
|
|
<Maximize2 size={18} />
|
|
مشاهده تصویر
|
|
</span>
|
|
</button>
|
|
|
|
{images.length > 1 && (
|
|
<div className="product-gallery__thumbs">
|
|
{images.map((image, index) => (
|
|
<button
|
|
className={image === activeImage ? "active" : ""}
|
|
type="button"
|
|
key={`${image}-${index}`}
|
|
onClick={() => setActiveImage(image)}
|
|
aria-label={`تصویر ${index + 1} از ${title}`}
|
|
>
|
|
<img src={image} alt={`${title}، تصویر ${index + 1}`} />
|
|
</button>
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{lightboxOpen && (
|
|
<div
|
|
className="product-lightbox"
|
|
role="dialog"
|
|
aria-modal="true"
|
|
aria-label={`گالری ${title}`}
|
|
onClick={() => setLightboxOpen(false)}
|
|
>
|
|
<button
|
|
type="button"
|
|
onClick={() => setLightboxOpen(false)}
|
|
aria-label="بستن گالری"
|
|
>
|
|
<X />
|
|
</button>
|
|
<img
|
|
src={activeImage}
|
|
alt={title}
|
|
onClick={(event) => event.stopPropagation()}
|
|
/>
|
|
</div>
|
|
)}
|
|
</>
|
|
);
|
|
}
|