{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "hover-navigation-viewer",
  "dependencies": [
    "react-pdf",
    "@wojtekmaj/react-hooks",
    "lucide-react"
  ],
  "registryDependencies": [
    "button"
  ],
  "files": [
    {
      "path": "registry/reusables/pdf-viewers/hover-navigation-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 HoverNavigationViewerProps {\n  url: string\n}\n\nexport const HoverNavigationViewer = ({ url }: HoverNavigationViewerProps) => {\n  const [numPages, setNumPages] = useState<number | null>(null)\n  const [pageNumber, setPageNumber] = useState(1)\n  const [isHovering, setIsHovering] = useState(false)\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  const pageWidth =\n    containerWidth ? Math.min(containerWidth, maxWidth) : maxWidth\n\n  return (\n    <div\n      className=\"relative mx-auto w-full max-w-4xl\"\n      onMouseEnter={() => setIsHovering(true)}\n      onMouseLeave={() => setIsHovering(false)}\n      ref={setContainerRef}\n    >\n      <div className=\"flex justify-center\" style={{ minHeight: pageHeight }}>\n        <Document\n          file={url}\n          onLoadSuccess={onDocumentLoadSuccess}\n          loading={<LoadingSpinner />}\n          className=\"flex justify-center\"\n        >\n          <Page\n            pageNumber={pageNumber}\n            renderTextLayer={true}\n            renderAnnotationLayer={true}\n            className=\"rounded-lg shadow-lg\"\n            width={pageWidth}\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            onLoadSuccess={(page) => {\n              setPageHeight(page.height * (pageWidth / page.width))\n            }}\n          />\n        </Document>\n      </div>\n\n      {numPages && numPages > 1 && isHovering && (\n        <>\n          <Button\n            variant=\"outline\"\n            size=\"icon\"\n            onClick={() => changePage(-1)}\n            disabled={pageNumber <= 1}\n            className={cn(\n              \"absolute top-1/2 left-2 z-50 -translate-y-1/2 rounded-full\",\n              \"bg-white/90 shadow-lg transition-all duration-200 hover:bg-white dark:bg-white dark:text-black dark:hover:bg-white\"\n            )}\n          >\n            <ChevronLeft className=\"h-4 w-4\" />\n          </Button>\n\n          <Button\n            variant=\"outline\"\n            size=\"icon\"\n            onClick={() => changePage(1)}\n            disabled={pageNumber >= (numPages || 1)}\n            className={cn(\n              \"absolute top-1/2 right-2 z-50 -translate-y-1/2 rounded-full\",\n              \"bg-white/90 shadow-lg transition-all duration-200 hover:bg-white dark:bg-white dark:text-black dark:hover:bg-white\"\n            )}\n          >\n            <ChevronRight className=\"h-4 w-4\" />\n          </Button>\n\n          <div className=\"absolute bottom-4 left-1/2 -translate-x-1/2 rounded-full bg-white/90 px-4 py-2 text-sm font-medium shadow-lg dark:text-black\">\n            Page {pageNumber} of {numPages}\n          </div>\n        </>\n      )}\n    </div>\n  )\n}\n",
      "type": "registry:component",
      "target": "components/pdf-viewers/hover-navigation-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"
}