"use client";

import * as React from "react";

import { cn } from "@/lib/utils";

export type ImageGalleryItem = {
  src: string;
  alt: string;
  caption?: string;
};

export interface ImageGalleryProps extends React.HTMLAttributes<HTMLDivElement> {
  images?: ImageGalleryItem[];
  showThumbnails?: boolean;
}

const defaultImages: ImageGalleryItem[] = [
  {
    src: "https://images.unsplash.com/photo-1500530855697-b586d89ba3ee?auto=format&fit=crop&w=1200&q=80",
    alt: "Forest path with morning light",
    caption: "Morning trail",
  },
  {
    src: "https://images.unsplash.com/photo-1501785888041-af3ef285b470?auto=format&fit=crop&w=1200&q=80",
    alt: "Mountain ridge at sunrise",
    caption: "Ridge glow",
  },
  {
    src: "https://images.unsplash.com/photo-1470770841072-f978cf4d019e?auto=format&fit=crop&w=1200&q=80",
    alt: "Lakeside cabin in the mist",
    caption: "Still waters",
  },
  {
    src: "https://images.unsplash.com/photo-1469474968028-56623f02e42e?auto=format&fit=crop&w=1200&q=80",
    alt: "Waterfall in a lush valley",
    caption: "Falling light",
  },
  {
    src: "https://images.unsplash.com/photo-1441974231531-c6227db76b6e?auto=format&fit=crop&w=1200&q=80",
    alt: "Fog rolling through tall trees",
    caption: "Quiet forest",
  },
  {
    src: "https://images.unsplash.com/photo-1500534314209-a25ddb2bd429?auto=format&fit=crop&w=1200&q=80",
    alt: "River winding through mountains",
    caption: "River bend",
  },
];

const ChevronLeftIcon = (props: React.SVGProps<SVGSVGElement>) => (
  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" {...props}>
    <path
      d="M15 18l-6-6 6-6"
      strokeWidth="1.5"
      strokeLinecap="round"
      strokeLinejoin="round"
    />
  </svg>
);

const ChevronRightIcon = (props: React.SVGProps<SVGSVGElement>) => (
  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" {...props}>
    <path
      d="M9 6l6 6-6 6"
      strokeWidth="1.5"
      strokeLinecap="round"
      strokeLinejoin="round"
    />
  </svg>
);

const CloseIcon = (props: React.SVGProps<SVGSVGElement>) => (
  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" {...props}>
    <path
      d="M6 6l12 12M18 6l-12 12"
      strokeWidth="1.5"
      strokeLinecap="round"
      strokeLinejoin="round"
    />
  </svg>
);

export function ImageGallery({
  images = defaultImages,
  showThumbnails = true,
  className,
  ...props
}: ImageGalleryProps) {
  const [activeIndex, setActiveIndex] = React.useState(0);
  const [isOpen, setIsOpen] = React.useState(false);

  const hasImages = images.length > 0;

  React.useEffect(() => {
    if (!hasImages) return;
    setActiveIndex((prev) => Math.min(prev, images.length - 1));
  }, [hasImages, images.length]);

  const openAt = (index: number) => {
    if (!hasImages) return;
    setActiveIndex(index);
    setIsOpen(true);
  };

  const close = () => setIsOpen(false);

  const goNext = React.useCallback(() => {
    setActiveIndex((prev) => (prev + 1) % images.length);
  }, [images.length]);

  const goPrev = React.useCallback(() => {
    setActiveIndex((prev) => (prev - 1 + images.length) % images.length);
  }, [images.length]);

  React.useEffect(() => {
    if (!isOpen) return;

    const handleKey = (event: KeyboardEvent) => {
      if (event.key === "Escape") {
        close();
        return;
      }
      if (event.key === "ArrowRight") {
        goNext();
      }
      if (event.key === "ArrowLeft") {
        goPrev();
      }
    };

    window.addEventListener("keydown", handleKey);
    return () => window.removeEventListener("keydown", handleKey);
  }, [isOpen, goNext, goPrev]);

  if (!hasImages) {
    return (
      <div
        className={cn(
          "rounded-xl border border-border bg-card px-6 py-10 text-center text-sm text-muted-foreground",
          className
        )}
        {...props}
      >
        No images available.
      </div>
    );
  }

  const activeImage = images[activeIndex];

  return (
    <div className={cn("w-full", className)} {...props}>
      <div className="grid grid-cols-2 gap-3 md:grid-cols-3 lg:grid-cols-4">
        {images.map((image, index) => (
          <button
            key={image.src}
            type="button"
            onClick={() => openAt(index)}
            className="group relative overflow-hidden rounded-xl border border-border bg-card text-left transition hover:bg-muted"
          >
            <div className="aspect-[4/3] w-full overflow-hidden">
              <img
                src={image.src}
                alt={image.alt}
                className="h-full w-full object-cover transition duration-300 group-hover:scale-105"
                loading="lazy"
              />
            </div>
            <div className="absolute inset-x-0 bottom-0 bg-background/80 px-3 py-2">
              <p className="text-xs font-medium text-foreground">
                {image.caption ?? image.alt}
              </p>
            </div>
          </button>
        ))}
      </div>

      {isOpen ? (
        <div
          className="fixed inset-0 z-50 flex items-center justify-center bg-background/90 p-6 backdrop-blur"
          role="dialog"
          aria-modal="true"
          onClick={close}
        >
          <div
            className="flex w-full max-w-5xl flex-col gap-4 rounded-2xl border border-border bg-card p-4"
            onClick={(event) => event.stopPropagation()}
          >
            <div className="flex items-start justify-between gap-4">
              <div>
                <p className="text-sm text-muted-foreground">Image preview</p>
                <h3 className="text-lg font-semibold text-foreground">
                  {activeImage.caption ?? activeImage.alt}
                </h3>
              </div>
              <button
                type="button"
                onClick={close}
                className="rounded-full border border-border p-2 text-foreground transition hover:bg-muted"
                aria-label="Close gallery"
              >
                <CloseIcon className="h-4 w-4" />
              </button>
            </div>

            <div className="relative flex items-center justify-center">
              <button
                type="button"
                onClick={goPrev}
                className="absolute left-2 rounded-full border border-border bg-background/80 p-2 text-foreground transition hover:bg-muted"
                aria-label="Previous image"
              >
                <ChevronLeftIcon className="h-5 w-5" />
              </button>
              <img
                src={activeImage.src}
                alt={activeImage.alt}
                className="max-h-[60vh] w-full rounded-xl object-contain"
              />
              <button
                type="button"
                onClick={goNext}
                className="absolute right-2 rounded-full border border-border bg-background/80 p-2 text-foreground transition hover:bg-muted"
                aria-label="Next image"
              >
                <ChevronRightIcon className="h-5 w-5" />
              </button>
            </div>

            {showThumbnails ? (
              <div className="flex items-center gap-3 overflow-x-auto pb-2">
                {images.map((image, index) => (
                  <button
                    key={`${image.src}-thumb`}
                    type="button"
                    onClick={() => setActiveIndex(index)}
                    className={cn(
                      "flex h-16 w-20 shrink-0 items-center justify-center rounded-lg border border-border p-0.5",
                      index === activeIndex ? "bg-accent" : "bg-background"
                    )}
                    aria-label={`Select ${image.alt}`}
                  >
                    <span className="h-full w-full overflow-hidden rounded-md bg-background">
                      <img
                        src={image.src}
                        alt={image.alt}
                        className="h-full w-full object-cover"
                        loading="lazy"
                      />
                    </span>
                  </button>
                ))}
              </div>
            ) : null}
          </div>
        </div>
      ) : null}
    </div>
  );
}
Image Gallery

Dependencies

Files

Installation
