PDF Thumbnails

1"use client";
2 
3import {
4  FileViewer,
5  FileViewerContent,
6  FileViewerHeader,
7  FileViewerTitle,
8  FileViewerProvider,
9  FileViewerSidebar,
10  FileViewerSidebarTrigger,
11  FileViewerInset,
12  FileViewerControls,
13  FileViewerViewport,
14} from "@/components/ui/file-viewer";
15import {
16  PdfViewerPages,
17  PdfViewerProvider,
18  PdfViewerThumbnails,
19} from "@/components/ui/pdf-viewer";
20 
21const PDF_URL = "/samples/nvidia-10k-fy2024.pdf";
22const PDF_SOURCE = {
23  kind: "url" as const,
24  url: PDF_URL,
25  fileName: "nvidia-10k-fy2024.pdf",
26};
27 
28/**
29 * PDF viewer with page thumbnails in a navigation rail.
30 *
31 * ViewerSidebar owns placement. PdfViewerThumbnails owns PDF page
32 * thumbnail behavior, active-page highlighting, and click-to-jump navigation.
33 */
34export function PdfThumbnailsBlock() {
35  return (
36    <div className="bg-background h-full min-h-[680px]">
37      <FileViewerProvider source={PDF_SOURCE} defaultSidebarOpen>
38        <FileViewer className="h-full">
39          <PdfViewerProvider>
40            <FileViewerHeader>
41                <FileViewerSidebarTrigger className="-ml-1" />
42                <FileViewerTitle />
43                <FileViewerControls />
44            </FileViewerHeader>
45            <FileViewerContent>
46              <FileViewerSidebar
47                aria-label="PDF pages"
48                width="4.5rem"
49                className="border-r"
50              >
51                <PdfViewerThumbnails thumbnailWidth={60} />
52              </FileViewerSidebar>
53              <FileViewerInset>
54                <FileViewerViewport>
55                  <PdfViewerPages bare className="h-full" />
56                </FileViewerViewport>
57              </FileViewerInset>
58            </FileViewerContent>
59          </PdfViewerProvider>
60        </FileViewer>
61      </FileViewerProvider>
62    </div>
63  );
64}