{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "image-lightbox",
  "type": "registry:ui",
  "title": "Image lightbox",
  "description": "A clickable image thumbnail that opens a full screen modal of the picture with a dimmed backdrop and a close button. Handy for screenshots and product shots.",
  "dependencies": [
    "lucide-react"
  ],
  "registryDependencies": [
    "https://ui.minidev.pro/r/button.json",
    "utils"
  ],
  "files": [
    {
      "path": "registry/ui/image-lightbox.tsx",
      "type": "registry:ui",
      "target": "components/ui/image-lightbox.tsx",
      "content": "\"use client\"\nimport * as React from \"react\"\nimport { Button } from \"@/components/ui/button\"\nimport { cn } from \"@/lib/utils\"\nimport { XIcon } from \"lucide-react\"\n\n// A small SVG landscape so the preview needs no network.\nconst SAMPLE_IMAGE = \"data:image/svg+xml;utf8,\" + encodeURIComponent(\"<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 500'><defs><linearGradient id='g' x1='0' y1='0' x2='1' y2='1'><stop offset='0' stop-color='#6d5bff'/><stop offset='.55' stop-color='#f472b6'/><stop offset='1' stop-color='#fbbf24'/></linearGradient></defs><rect width='800' height='500' fill='url(#g)'/><circle cx='620' cy='140' r='70' fill='#fff' fill-opacity='.85'/><path d='M0 400 L160 300 L300 380 L440 250 L600 360 L800 280 L800 500 L0 500 Z' fill='#111114' fill-opacity='.55'/></svg>\")\n\nfunction ImageLightbox({\n  src = SAMPLE_IMAGE,\n  alt = \"Preview\",\n  className,\n}: {\n  src?: string\n  alt?: string\n  className?: string\n}) {\n  const [open, setOpen] = React.useState(false)\n  return (\n    <div data-slot=\"image-lightbox\" className={cn(\"inline-block\", className)}>\n      <button type=\"button\" className=\"overflow-hidden rounded-xl border border-border outline-none focus-visible:ring-2 focus-visible:ring-accent\" onClick={() => setOpen(true)}>\n        {/* eslint-disable-next-line @next/next/no-img-element */}\n        <img src={src} alt={alt} className=\"h-28 w-44 object-cover\" />\n      </button>\n      {open ? (\n        <div className=\"fixed inset-0 z-50 flex items-center justify-center bg-bg/90 p-6\" role=\"dialog\" aria-modal=\"true\" aria-label={alt}>\n          <Button type=\"button\" size=\"icon\" variant=\"outline\" className=\"absolute top-4 right-4\" aria-label=\"Close\" onClick={() => setOpen(false)}>\n            <XIcon className=\"size-4\" />\n          </Button>\n          {/* eslint-disable-next-line @next/next/no-img-element */}\n          <img src={src} alt={alt} className=\"max-h-[80vh] max-w-full rounded-xl border border-border\" />\n        </div>\n      ) : null}\n    </div>\n  )\n}\nexport { ImageLightbox }\n"
    }
  ]
}