"use client"
import * as React from "react"
import { ProductGallery, Controls, ProductGalleryPreviewImage, ProductGalleryThumb, ProductGalleryThumbsWrap } from "@/components/ui/product-gallery"
const PRODUCT_IMAGES = [
"https://cdn.21st.dev/assets/mirror/ac/ac31da27c421d1240b5add1011866c68c23fd988e3412d999c70943ca2468fb5.jpg",
"https://cdn.21st.dev/assets/mirror/73/7365e182be8c7ab5d86a1b5f578be2e25e59d5def4d7e5a37890d452b56d9963.jpg",
"https://cdn.21st.dev/assets/mirror/56/5683c49cc4a063719b7234980793b67f17073f5325d5c71bdc71e61b22f762c8.jpg",
"https://cdn.21st.dev/assets/mirror/8b/8b993f93ace0f90519c57fb690e783d4b34561d0876a3a4e23b71d2b8cda50c7.jpg",
"https://cdn.21st.dev/assets/mirror/80/80dda9a133e84a153181a9381110c7550ae0e7da028db7c86859d64d077c2c51.jpg",
"https://cdn.21st.dev/assets/mirror/c2/c2e770d647deb9f1ca62b49c8b868c70e8356d21d5d4b01cdbfff5679dd7718e.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>
)
}Part of Systaliko UI — browse the full library on 21st.dev.