Gallery section

import * as React from "react";
import { cn } from "@/lib/utils";

type GalleryItem = {
  src: string;
  alt: string;
  caption: string;
  /** A mono line under the caption: a year, a place, a credit. */
  meta?: string;
};

type GallerySectionProps = Omit<React.ComponentProps<"div">, "children"> & {
  items: GalleryItem[];
  /** Columns once the container is wide enough. */
  columns?: 2 | 3;
};

const COLUMNS = { 2: "grid-cols-2", 3: "grid-cols-2 @2xl:grid-cols-3" } as const;

/**
 * A captioned image grid. Every image keeps one aspect ratio, so captions line up in rows.
 */
export function GallerySection({ items, columns = 3, className, ...props }: GallerySectionProps) {
  return (
    <div data-slot="gallery-section" className={cn("@container w-full", className)} {...props}>
      <div className={cn("grid gap-x-4 gap-y-6", COLUMNS[columns])}>
        {items.map((item) => (
          <figure key={item.src} className="m-0 flex flex-col gap-2">
            <div className="overflow-hidden rounded-lg border bg-muted">
              {/* eslint-disable-next-line @next/next/no-img-element */}
              <img src={item.src} alt={item.alt} loading="lazy" className="aspect-3/2 w-full object-cover" />
            </div>
            <figcaption className="flex flex-col gap-0.5">
              <span className="text-sm leading-5 font-medium text-foreground">{item.caption}</span>
              {item.meta && <span className="font-mono text-xs leading-4 text-muted-foreground">{item.meta}</span>}
            </figcaption>
          </figure>
        ))}
      </div>
    </div>
  );
}