Product Gallery

"use client" 

import * as React from "react"
import { ProductGallery, Controls, ProductGalleryPreviewImage, ProductGalleryThumb, ProductGalleryThumbsWrap } from "@/components/ui/product-gallery"

const PRODUCT_IMAGES = [
  "https://m.media-amazon.com/images/I/71gzELUdnlL._AC_SY695_.jpg",
  "https://m.media-amazon.com/images/I/713sbqTTU5L._AC_SY675_.jpg",
  "https://m.media-amazon.com/images/I/71qE7xlwixL._AC_SY695_.jpg",
  "https://m.media-amazon.com/images/I/71I5kbHaplL._AC_SY695_.jpg",
  "https://m.media-amazon.com/images/I/715ZAssNGmL._AC_SY695_.jpg",
  "https://m.media-amazon.com/images/I/71nAG2yOeYL._AC_SY695_.jpg",
]
export function ProductGalleryDemo() {
    return (
        <div className="container flex min-h-svh w-full items-center justify-center px-6 py-12">
      <ProductGallery
        className="gap-4 flex items-start justify-start gap-1"
        productImages={PRODUCT_IMAGES}
      >
        <ProductGalleryThumbsWrap className="flex flex-col items-start gap-1">
          {PRODUCT_IMAGES.map((imageUrl, index) => (
            <ProductGalleryThumb
              key={`${imageUrl}-${index}`}
              thumbImageUrl={imageUrl}
              index={index}
            />
          ))}
        </ProductGalleryThumbsWrap>
        <ProductGalleryPreviewImage>
          <Controls className=" flex flex-col gap-1" />
        </ProductGalleryPreviewImage>
      </ProductGallery>
    </div>
    )
}