"use client"; import { Loader2 } from "lucide-react" import { cn } from "@/lib/utils" interface LoadingSpinnerProps { minHeight?: string minWidth?: string className?: string spinnerClassName?: string } const LoadingSpinner = ({ minHeight = "600px", minWidth = "800px", className, spinnerClassName, }: LoadingSpinnerProps) => { return (

) } import { useCallback, useState } from "react" import { useResizeObserver } from "@wojtekmaj/react-hooks" import { Document, Page, pdfjs } from "react-pdf" import { cn } from "@/lib/utils" pdfjs.GlobalWorkerOptions.workerSrc = new URL( "pdfjs-dist/build/pdf.worker.min.mjs", import.meta.url ).toString() const resizeObserverOptions = {} const maxWidth = 800 interface ThumbnailViewerProps { url: string } export const ThumbnailViewer = ({ url }: ThumbnailViewerProps) => { const [numPages, setNumPages] = useState(null) const [pageNumber, setPageNumber] = useState(1) const [containerRef, setContainerRef] = useState(null) const [containerWidth, setContainerWidth] = useState() const [pageHeight, setPageHeight] = useState(0) const onResize = useCallback((entries) => { const [entry] = entries if (entry) { setContainerWidth(entry.contentRect.width) } }, []) useResizeObserver(containerRef, resizeObserverOptions, onResize) const onDocumentLoadSuccess = ({ numPages }: { numPages: number }) => { setNumPages(numPages) } // Calculate main viewer width based on container width const mainViewerWidth = containerWidth ? Math.min(containerWidth - 48, maxWidth) : maxWidth // Calculate thumbnail width - more responsive now const thumbnailWidth = containerWidth ? Math.min(120, containerWidth * 0.15) : 96 return (

{/* Thumbnails */}

{Array.from(new Array(numPages), (_, index) => ( ))}

{/* Main Viewer */}

} className={cn( "flex flex-col items-center", "[&_.react-pdf__Page]:my-0" )} > } onLoadSuccess={(page) => { setPageHeight(page.height * (mainViewerWidth / page.width)) }} />

) }