ProductImageGallery
Component for displaying a gallery of product images
Code
import type { SampleProduct } from "../../helpers"
const ProductImageGallery = ({ product }: { product: SampleProduct }) => {
if (!product.images?.length) return null
return (
<div className="w-full flex flex-col gap-4">
<div className="w-full grid grid-cols-1">
<div className="w-full aspect-square overflow-hidden rounded-lg relative shrink-0">
<img src={product.images[0].src} alt={product.images[0].alt || ""} className="object-cover" sizes="auto" />
</div>
</div>
<div className="w-full grid grid-cols-2 gap-4">
{product.images.slice(1).map((image) => (
<div key={image.src} className="w-full aspect-square overflow-hidden rounded-lg relative shrink-0">
<img alt={image.alt || ""} className="object-cover" src={image.src} sizes="auto" />
</div>
))}
</div>
</div>
)
}
export default ProductImageGallery