ProductImageGallery

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