Lightbox

import { Lightbox } from "@/components/ui/lightbox";

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

"use client";

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

const Lightbox = forwardRef(({ className, open, onClose, src, alt = "", ...props }, ref) => {
  useEffect(() => {
    if (!open) return;
    const handler = (e) => { if (e.key === "Escape") onClose?.(); };
    document.addEventListener("keydown", handler);
    document.body.style.overflow = "hidden";
    return () => { document.removeEventListener("keydown", handler); document.body.style.overflow = ""; };
  }, [open, onClose]);

  if (!open) return null;
  return (
    <div ref={ref} className={cn("fixed inset-0 z-50 flex items-center justify-center bg-black/90", className)} onClick={onClose} {...props}>
      <button onClick={onClose} className="absolute right-4 top-4 text-white/70 hover:text-white">
        <svg className="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" /></svg>
      </button>
      <img src={src} alt={alt} className="max-h-[90vh] max-w-[90vw] rounded-lg object-contain" onClick={(e) => e.stopPropagation()} />
    </div>
  );
});
Lightbox.displayName = "Lightbox";

export { Lightbox };