{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "compact-viewer",
  "dependencies": [
    "react-pdf",
    "@wojtekmaj/react-hooks",
    "lucide-react"
  ],
  "registryDependencies": [
    "button"
  ],
  "files": [
    {
      "path": "registry/reusables/pdf-viewers/compact-viewer.tsx",
      "content": "\"use client\"\n\nimport { useCallback, useState } from \"react\"\nimport { useResizeObserver } from \"@wojtekmaj/react-hooks\"\nimport { ChevronLeft, ChevronRight } from \"lucide-react\"\nimport { Document, Page, pdfjs } from \"react-pdf\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\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 CompactViewerProps {\n  url: string\n}\n\nexport const CompactViewer = ({ url }: CompactViewerProps) => {\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<number>(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  const changePage = (offset: number) => {\n    setPageNumber((prevPageNumber) => {\n      const newPageNumber = prevPageNumber + offset\n      return numPages ?\n          Math.min(Math.max(1, newPageNumber), numPages)\n        : prevPageNumber\n    })\n  }\n\n  // Calculate page width based on container\n  const pageWidth =\n    containerWidth ? Math.min(containerWidth - 48, maxWidth) : maxWidth\n\n  return (\n    <div\n      className=\"mx-auto w-full max-w-4xl rounded-xl bg-background/50 p-6 shadow-lg backdrop-blur-sm\"\n      ref={setContainerRef}\n    >\n      <div className=\"flex flex-col gap-6\">\n        {/* PDF Viewer */}\n        <div className=\"flex justify-center\" style={{ minHeight: pageHeight }}>\n          <Document\n            file={url}\n            onLoadSuccess={onDocumentLoadSuccess}\n            loading={\n              <LoadingSpinner\n                minHeight={pageHeight ? `${pageHeight}px` : \"600px\"}\n                minWidth={pageWidth ? `${pageWidth}px` : \"800px\"}\n                spinnerClassName=\"text-white dark:text-white\"\n              />\n            }\n            className={cn(\n              \"flex flex-col items-center\",\n              \"[&_.react-pdf__Page]:my-0\",\n              \"[&_.react-pdf__Page__canvas]:max-w-full\",\n              \"[&_.react-pdf__Page__canvas]:h-auto\",\n              \"dark:[&_.react-pdf__Page]:brightness-90 dark:[&_.react-pdf__Page]:invert\"\n            )}\n          >\n            <Page\n              pageNumber={pageNumber}\n              renderTextLayer={true}\n              renderAnnotationLayer={true}\n              className=\"overflow-hidden rounded-xl shadow-xl ring-1 ring-black/5 dark:ring-white/10\"\n              width={pageWidth}\n              loading={\n                <LoadingSpinner\n                  minHeight={pageHeight ? `${pageHeight}px` : \"600px\"}\n                  minWidth={pageWidth ? `${pageWidth}px` : \"800px\"}\n                  spinnerClassName=\"dark:text-black\"\n                />\n              }\n              onLoadSuccess={(page) => {\n                setPageHeight(page.height * (pageWidth / page.width))\n              }}\n            />\n          </Document>\n        </div>\n\n        {/* Navigation Controls */}\n        <div className=\"flex items-center justify-center gap-3 py-2\">\n          <div className=\"flex items-center gap-2 rounded-full bg-background/80 px-4 py-2 shadow-sm ring-1 ring-black/5 backdrop-blur-sm dark:ring-white/10\">\n            <Button\n              variant=\"ghost\"\n              size=\"icon\"\n              onClick={() => changePage(-1)}\n              disabled={pageNumber <= 1}\n              className=\"h-8 w-8 rounded-full hover:bg-accent\"\n            >\n              <ChevronLeft className=\"h-4 w-4\" />\n            </Button>\n\n            <div className=\"flex min-w-[90px] items-center justify-center gap-1.5\">\n              <span className=\"text-sm font-medium text-foreground\">\n                {pageNumber}\n              </span>\n              <span className=\"text-sm text-muted-foreground\">/</span>\n              <span className=\"text-sm text-muted-foreground\">\n                {numPages || \"-\"}\n              </span>\n            </div>\n\n            <Button\n              variant=\"ghost\"\n              size=\"icon\"\n              onClick={() => changePage(1)}\n              disabled={pageNumber >= (numPages || 1)}\n              className=\"h-8 w-8 rounded-full hover:bg-accent\"\n            >\n              <ChevronRight className=\"h-4 w-4\" />\n            </Button>\n          </div>\n        </div>\n      </div>\n    </div>\n  )\n}\n",
      "type": "registry:component",
      "target": "components/pdf-viewers/compact-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"
}