"use client";

import * as React from "react";

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

export interface LightboxImage {
  src: string;
  alt?: string;
}

export interface LightboxProps extends React.HTMLAttributes<HTMLDivElement> {
  images: LightboxImage[];
  initialIndex?: number;
  open?: boolean;
  defaultOpen?: boolean;
  onOpenChange?: (open: boolean) => void;
  triggerLabel?: string;
  trigger?: React.ReactNode;
}

export function Lightbox({
  images,
  initialIndex = 0,
  open,
  defaultOpen = false,
  onOpenChange,
  triggerLabel = "Open gallery",
  trigger,
  className,
  ...props
}: LightboxProps) {
  const [internalOpen, setInternalOpen] = React.useState(defaultOpen);
  const [activeIndex, setActiveIndex] = React.useState(initialIndex);
  const [zoomed, setZoomed] = React.useState(false);
  const isControlled = open !== undefined;
  const isOpen = isControlled ? open : internalOpen;

  const setOpen = React.useCallback(
    (value: boolean) => {
      if (!isControlled) {
        setInternalOpen(value);
      }
      onOpenChange?.(value);
    },
    [isControlled, onOpenChange]
  );

  React.useEffect(() => {
    if (isOpen) {
      setActiveIndex(initialIndex);
      setZoomed(false);
    }
  }, [isOpen, initialIndex]);

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

    const handleKeyDown = (event: KeyboardEvent) => {
      if (event.key === "Escape") {
        setOpen(false);
      }

      if (event.key === "ArrowRight") {
        setActiveIndex((prev) => (prev + 1) % images.length);
      }

      if (event.key === "ArrowLeft") {
        setActiveIndex((prev) => (prev - 1 + images.length) % images.length);
      }
    };

    document.addEventListener("keydown", handleKeyDown);
    return () => document.removeEventListener("keydown", handleKeyDown);
  }, [images.length, isOpen, setOpen]);

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

    const originalOverflow = document.body.style.overflow;
    document.body.style.overflow = "hidden";

    return () => {
      document.body.style.overflow = originalOverflow;
    };
  }, [isOpen]);

  const current = images[activeIndex];

  const triggerElement = React.useMemo(() => {
    if (trigger) {
      if (React.isValidElement(trigger)) {
        const triggerElement = trigger as React.ReactElement<{
          onClick?: React.MouseEventHandler;
        }>;
        const existingOnClick = triggerElement.props.onClick;

        return React.cloneElement(triggerElement, {
          onClick: (event: React.MouseEvent) => {
            existingOnClick?.(event);
            setOpen(true);
          },
        });
      }

      return (
        <button
          type="button"
          onClick={() => setOpen(true)}
          className={cn(
            "inline-flex items-center gap-2 rounded-md border border-border",
            "bg-background px-4 py-2 text-sm font-medium text-foreground",
            "transition-colors hover:bg-muted",
            "focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-border"
          )}
        >
          {trigger}
        </button>
      );
    }

    if (!triggerLabel) {
      return null;
    }

    return (
      <button
        type="button"
        onClick={() => setOpen(true)}
        className={cn(
          "inline-flex items-center gap-2 rounded-md border border-border",
          "bg-background px-4 py-2 text-sm font-medium text-foreground",
          "transition-colors hover:bg-muted",
          "focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-border"
        )}
      >
        {triggerLabel}
      </button>
    );
  }, [trigger, triggerLabel, setOpen]);

  if (!images.length) {
    return null;
  }

  return (
    <div className={cn("inline-flex", className)} {...props}>
      {triggerElement}

      <div
        className={cn(
          "fixed inset-0 z-50 transition",
          isOpen ? "pointer-events-auto" : "pointer-events-none"
        )}
        aria-hidden={!isOpen}
      >
        <div
          className={cn(
            "absolute inset-0 bg-background/90 transition-opacity",
            isOpen ? "opacity-100" : "opacity-0"
          )}
          onClick={() => setOpen(false)}
        />

        <div className="absolute inset-0 flex flex-col items-center justify-center px-6 py-10">
          <div className="flex w-full max-w-5xl items-center justify-between">
            <div className="flex items-center gap-3">
              <span className="text-sm text-muted-foreground">
                {activeIndex + 1} of {images.length}
              </span>
              <button
                type="button"
                onClick={() => setZoomed((prev) => !prev)}
                className={cn(
                  "inline-flex items-center gap-2 rounded-full border border-border",
                  "bg-card px-3 py-1.5 text-xs font-medium text-foreground",
                  "transition-colors hover:bg-muted",
                  "focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-border"
                )}
              >
                <span>{zoomed ? "Zoom out" : "Zoom in"}</span>
                <ZoomIcon className="h-4 w-4" />
              </button>
            </div>
            <button
              type="button"
              onClick={() => setOpen(false)}
              className={cn(
                "inline-flex items-center justify-center rounded-full border border-border",
                "bg-card p-2 text-muted-foreground transition-colors",
                "hover:bg-muted hover:text-foreground",
                "focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-border"
              )}
            >
              <CloseIcon className="h-5 w-5" />
            </button>
          </div>

          <div className="relative mt-6 flex w-full max-w-5xl items-center justify-center">
            <button
              type="button"
              onClick={() => setActiveIndex((prev) => (prev - 1 + images.length) % images.length)}
              className={cn(
                "absolute left-0 z-10 inline-flex h-12 w-12 items-center justify-center",
                "rounded-full border border-border bg-card text-muted-foreground",
                "transition-colors hover:bg-muted hover:text-foreground",
                "focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-border"
              )}
            >
              <ArrowIcon className="h-5 w-5 rotate-180" />
            </button>

            <div
              className={cn(
                "flex max-h-[70vh] w-full items-center justify-center overflow-hidden",
                "rounded-2xl border border-border bg-card"
              )}
            >
              <img
                src={current.src}
                alt={current.alt ?? "Lightbox image"}
                className={cn(
                  "max-h-[70vh] w-full object-contain transition-transform duration-200",
                  zoomed ? "scale-110" : "scale-100"
                )}
              />
            </div>

            <button
              type="button"
              onClick={() => setActiveIndex((prev) => (prev + 1) % images.length)}
              className={cn(
                "absolute right-0 z-10 inline-flex h-12 w-12 items-center justify-center",
                "rounded-full border border-border bg-card text-muted-foreground",
                "transition-colors hover:bg-muted hover:text-foreground",
                "focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-border"
              )}
            >
              <ArrowIcon className="h-5 w-5" />
            </button>
          </div>

          <div className="mt-6 flex gap-3">
            {images.map((image, index) => (
              <button
                key={`${image.src}-${index}`}
                type="button"
                onClick={() => setActiveIndex(index)}
                className={cn(
                  "h-16 w-20 overflow-hidden rounded-lg border bg-card",
                  index === activeIndex
                    ? "outline outline-2 outline-offset-2 outline-border"
                    : "border-border"
                )}
              >
                <img
                  src={image.src}
                  alt={image.alt ?? "Thumbnail"}
                  className="h-full w-full object-cover"
                />
              </button>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
}

function ArrowIcon({ className }: { className?: string }) {
  return (
    <svg
      aria-hidden="true"
      className={className}
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      strokeWidth="2"
      strokeLinecap="round"
      strokeLinejoin="round"
    >
      <path d="M5 12h14" />
      <path d="m13 6 6 6-6 6" />
    </svg>
  );
}

function CloseIcon({ className }: { className?: string }) {
  return (
    <svg
      aria-hidden="true"
      className={className}
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      strokeWidth="2"
      strokeLinecap="round"
      strokeLinejoin="round"
    >
      <path d="M18 6 6 18" />
      <path d="m6 6 12 12" />
    </svg>
  );
}

function ZoomIcon({ className }: { className?: string }) {
  return (
    <svg
      aria-hidden="true"
      className={className}
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      strokeWidth="2"
      strokeLinecap="round"
      strokeLinejoin="round"
    >
      <circle cx="11" cy="11" r="7" />
      <path d="m21 21-4.3-4.3" />
      <path d="M11 8v6" />
      <path d="M8 11h6" />
    </svg>
  );
}
Lightbox

Dependencies

Files

Installation
