import { ImageGallery } from "@/components/tool-ui/image-gallery";

export function Example() {
  return (
    <ImageGallery
      id="image-gallery-example"
      title="Mountain landscapes"
      description="Here are some images matching your search"
      images={[
        {
          id: "img-1",
          src: "https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=800&h=600&fit=crop",
          alt: "Dramatic mountain peaks at sunrise",
          width: 800,
          height: 600,
          title: "Alpine Sunrise",
          caption: "Dolomites, Italy",
        },
        {
          id: "img-2",
          src: "https://images.unsplash.com/photo-1464822759023-fed622ff2c3b?w=800&h=1200&fit=crop",
          alt: "Misty mountain valley",
          width: 800,
          height: 1200,
          title: "Misty Valley",
        },
        // ... more images
      ]}
      onImageClick={(id, image) => console.log("Clicked:", id, image)}
    />
  );
}

pnpm dlx shadcn@latest add button

<ImageGallery
  id="limited-gallery"
  images={/* 12 images */}
  maxVisible={4}
/>