FileViewerPageRail

Use a controlled page rail when the document handle and current page are owned outside the easy renderer API. PDF exposes this lower-level shape as PdfThumbnailRail.

Copy<PdfThumbnailRail
  resource={resource}
  currentPage={currentPage}
  onSelectPage={scrollToPage}
  thumbnailWidth={120}
  thumbnailShape="page"
/>

Behavior

• Fully controlled: you pass the resource, the highlighted currentPage, and an onSelectPage handler that jumps the document. The rail holds no page state of its own.
• Pair it with a renderer's imperative handle — e.g. PdfViewerHandle.scrollToPage — so clicking a thumbnail scrolls the surface to that page.
• Prefer renderer-bound FileViewerThumbnails (PdfViewerThumbnails) for normal compositions; reach for the controlled rail only when another workflow already owns page state.

API Reference

PdfThumbnailRail — the controlled rail:

Source

"use client";

import * as React from "react";

import { clearPdfDocumentResource } from "@/lib/pdf-document-resource";
import { cn } from "@/lib/utils";
import type { ViewerResource } from "@/lib/viewer-resource";
import { Spinner } from "@/components/ui/spinner";

import {
  buildPdfThumbnailLayout,
  PDF_THUMBNAIL_INITIAL_VIEWPORT_HEIGHT,