Gallery

import { Gallery } from "@/components/ui/gallery";

export default function Example() {
  return <Gallery />;
}

"use client";

import { forwardRef, useState } from "react";
import { cn } from "@/lib/utils";

const Gallery = forwardRef(({ className, images = [], columns = 3, ...props }, ref) => {
  return (
    <div ref={ref} className={cn("grid gap-2",
      columns === 2 && "grid-cols-2",
      columns === 3 && "grid-cols-3",
      columns === 4 && "grid-cols-4",
      className
    )} {...props}>
      {images.map((img, i) => (
        <div key={i} className="group relative aspect-square overflow-hidden rounded-lg bg-muted">
          <img src={typeof img === "string" ? img : img.src} alt={typeof img === "string" ? "" : img.alt || ""}
            className="h-full w-full object-cover transition-transform group-hover:scale-105"
          />
        </div>
      ))}
    </div>
  );
});
Gallery.displayName = "Gallery";

export { Gallery };