{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "thumbnail-viewer",
  "dependencies": [
    "react-pdf",
    "@wojtekmaj/react-hooks",
    "lucide-react"
  ],
  "registryDependencies": [
    "button"
  ],
  "files": [
    {
      "path": "registry/reusables/pdf-viewers/thumbnail-viewer.tsx",
      "content": "\"use client\"\n\nimport { useCallback, useState } from \"react\"\nimport { useResizeObserver } from \"@wojtekmaj/react-hooks\"\nimport { Document, Page, pdfjs } from \"react-pdf\"\n\nimport { cn } from \"@/lib/utils\"\n\nimport { LoadingSpinner } from \"./loading-spinner\"\n\npdfjs.GlobalWorkerOptions.workerSrc = new URL(\n  \"pdfjs-dist/build/pdf.worker.min.mjs\",\n  import.meta.url\n).toString()\n\nconst resizeObserverOptions = {}\nconst maxWidth = 800\n\ninterface ThumbnailViewerProps {\n  url: string\n}\n\nexport const ThumbnailViewer = ({ url }: ThumbnailViewerProps) => {\n  const [numPages, setNumPages] = useState<number | null>(null)\n  const [pageNumber, setPageNumber] = useState(1)\n  const [containerRef, setContainerRef] = useState<HTMLElement | null>(null)\n  const [containerWidth, setContainerWidth] = useState<number>()\n  const [pageHeight, setPageHeight] = useState(0)\n\n  const onResize = useCallback<ResizeObserverCallback>((entries) => {\n    const [entry] = entries\n    if (entry) {\n      setContainerWidth(entry.contentRect.width)\n    }\n  }, [])\n\n  useResizeObserver(containerRef, resizeObserverOptions, onResize)\n\n  const onDocumentLoadSuccess = ({ numPages }: { numPages: number }) => {\n    setNumPages(numPages)\n  }\n\n  // Calculate main viewer width based on container width\n  const mainViewerWidth =\n    containerWidth ? Math.min(containerWidth - 48, maxWidth) : maxWidth\n\n  // Calculate thumbnail width - more responsive now\n  const thumbnailWidth =\n    containerWidth ? Math.min(120, containerWidth * 0.15) : 96\n\n  return (\n    <div className=\"mx-auto w-full max-w-6xl\" ref={setContainerRef}>\n      <div className={cn(\"flex flex-col gap-4 lg:flex-row\")}>\n        {/* Thumbnails */}\n        <div\n          className={cn(\n            \"flex gap-2 overflow-x-auto p-4\",\n            \"lg:max-h-screen lg:flex-col lg:overflow-x-hidden lg:overflow-y-auto\",\n            \"rounded-xl bg-background/50 shadow-lg backdrop-blur-sm\",\n            \"h-fit max-w-full min-w-full lg:max-w-[150px] lg:min-w-[150px]\",\n            \"scrollbar-thin scrollbar-thumb-secondary scrollbar-track-transparent\"\n          )}\n        >\n          {Array.from(new Array(numPages), (_, index) => (\n            <button\n              key={index}\n              onClick={() => setPageNumber(index + 1)}\n              className={cn(\n                \"relative shrink-0 overflow-hidden rounded-lg transition-all\",\n                \"hover:ring-2 hover:ring-primary/50\",\n                \"bg-background/50\",\n                pageNumber === index + 1 && \"ring-2 ring-primary\"\n              )}\n              style={{\n                width: thumbnailWidth,\n                height: thumbnailWidth * 1.4,\n              }}\n            >\n              <Document file={url}>\n                <Page\n                  pageNumber={index + 1}\n                  width={thumbnailWidth}\n                  renderTextLayer={false}\n                  renderAnnotationLayer={false}\n                  loading={\n                    <LoadingSpinner\n                      minHeight={`${thumbnailWidth * 1.4}px`}\n                      minWidth={`${thumbnailWidth}px`}\n                      className=\"bg-muted\"\n                    />\n                  }\n                />\n              </Document>\n            </button>\n          ))}\n        </div>\n\n        {/* Main Viewer */}\n        <div className=\"min-w-0 flex-1 overflow-y-auto lg:max-h-screen\">\n          <div\n            className=\"flex justify-center\"\n            style={{ minHeight: pageHeight }}\n          >\n            <Document\n              file={url}\n              onLoadSuccess={onDocumentLoadSuccess}\n              loading={\n                <LoadingSpinner\n                  minHeight={pageHeight ? `${pageHeight}px` : \"600px\"}\n                  minWidth={mainViewerWidth ? `${mainViewerWidth}px` : \"800px\"}\n                  spinnerClassName=\"dark:text-black\"\n                />\n              }\n              className={cn(\n                \"flex flex-col items-center\",\n                \"[&_.react-pdf__Page]:my-0\"\n              )}\n            >\n              <Page\n                pageNumber={pageNumber}\n                renderTextLayer={true}\n                renderAnnotationLayer={true}\n                className=\"rounded-lg shadow-xl\"\n                width={mainViewerWidth}\n                loading={\n                  <LoadingSpinner\n                    minHeight={pageHeight ? `${pageHeight}px` : \"600px\"}\n                    minWidth={\n                      mainViewerWidth ? `${mainViewerWidth}px` : \"800px\"\n                    }\n                    spinnerClassName=\"dark:text-black\"\n                  />\n                }\n                onLoadSuccess={(page) => {\n                  setPageHeight(page.height * (mainViewerWidth / page.width))\n                }}\n              />\n            </Document>\n          </div>\n        </div>\n      </div>\n    </div>\n  )\n}\n",
      "type": "registry:component",
      "target": "components/pdf-viewers/thumbnail-viewer.tsx"
    },
    {
      "path": "registry/reusables/pdf-viewers/loading-spinner.tsx",
      "content": "import { Loader2 } from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\n\ninterface LoadingSpinnerProps {\n  minHeight?: string\n  minWidth?: string\n  className?: string\n  spinnerClassName?: string\n}\n\nexport const LoadingSpinner = ({\n  minHeight = \"600px\",\n  minWidth = \"800px\",\n  className,\n  spinnerClassName,\n}: LoadingSpinnerProps) => {\n  return (\n    <div\n      className={cn(\"flex items-center justify-center\", className)}\n      style={{ minHeight, minWidth }}\n    >\n      <Loader2\n        className={cn(\"h-8 w-8 animate-spin text-white\", spinnerClassName)}\n      />\n    </div>\n  )\n}\n",
      "type": "registry:component",
      "target": "components/pdf-viewers/loading-spinner.tsx"
    }
  ],
  "type": "registry:component"
}