PDF Viewer

"use client";

import { PdfViewer } from "@/components/f-ui/pdf-viewer/pdf-viewer";
import { DocumentDemoWhenVisible } from "@/demos/document-demo-when-visible";

/** Local fixture pinned from Extend UI `bca60b9e204ef0db248466dfa44367ad4c23d404`. */
const DEMO_PDF = "/demo-documents/loan-application.pdf";

export function PdfViewerDemo() {
  return (
    <DocumentDemoWhenVisible>
      <div className="h-[560px] overflow-hidden rounded-xl border">
        <PdfViewer
          engineOptions={{ wasmUrl: "/vendor/pdfium.wasm" }}
          fileName="loan-application.pdf"
          src={DEMO_PDF}
        />
      </div>
    </DocumentDemoWhenVisible>
  );
}

"use client";

import { useRef, useState } from "react";

import {
  PdfViewer,
  type PdfViewerHandle,
} from "@/components/f-ui/pdf-viewer/pdf-viewer";
import { Button } from "@/components/ui/button";
import { DocumentDemoWhenVisible } from "@/demos/document-demo-when-visible";

/** Local fixture pinned from Extend UI `bca60b9e204ef0db248466dfa44367ad4c23d404`. */
const DEMO_PDF = "/demo-documents/loan-application.pdf";

export function PdfViewerOverlayJumpDemo() {
  const viewerRef = useRef<PdfViewerHandle>(null);
  const [activePage, setActivePage] = useState(1);
  const [numPages, setNumPages] = useState(0);

  return (
    <DocumentDemoWhenVisible minHeight={620}>
      <div className="space-y-3">
        <div className="flex flex-wrap items-center gap-2">
          <Button
            onClick={() => viewerRef.current?.scrollToPage(1)}
            type="button"
            variant="outline"
          >
            Jump to page 1
          </Button>
          <Button
            disabled={numPages < 1}
            onClick={() =>
              viewerRef.current?.scrollToPage(Math.min(numPages || 1, 2))
            }
            type="button"
            variant="outline"
          >
            Jump to page 2
          </Button>
          <p className="text-muted-foreground text-sm tabular-nums">
            Active page: {activePage}
            {numPages > 0 ? ` / ${numPages}` : ""}
          </p>
        </div>
        <div className="h-[560px] overflow-hidden rounded-xl border">
          <PdfViewer
            ref={viewerRef}
            engineOptions={{ wasmUrl: "/vendor/pdfium.wasm" }}
            fileName="loan-application.pdf"
            onActivePageChange={setActivePage}
            onDocumentLoadSuccess={({ numPages: pages }) => setNumPages(pages)}
            renderPageOverlay={({ pageNumber }) => (
              <div className="pointer-events-none absolute top-2 left-2 rounded-md bg-background/90 px-2 py-1 text-xs shadow-sm">
                Page {pageNumber}
              </div>
            )}
            src={DEMO_PDF}
          />
        </div>
      </div>
    </DocumentDemoWhenVisible>
  );
}

"use client";

import { usePdfViewer } from "@/components/f-ui/pdf-viewer/use-pdf-viewer";

/** Local fixture pinned from Extend UI `bca60b9e204ef0db248466dfa44367ad4c23d404`. */
const DEMO_PDF = "/demo-documents/loan-application.pdf";

export function PdfViewerHeadlessDemo() {
  const { state, retry } = usePdfViewer({ src: DEMO_PDF });

  return (
    <div>
      <p>
        preparing: {state.isPreparingSource ? "yes" : "no"}
      </p>
      <p>sourceUrl: {state.sourceUrl ?? "—"}</p>
      <p>
        loadError:{" "}
        {state.loadError ? state.loadError.message : "—"}
      </p>
      <p>retryKey: {state.retryKey}</p>
      <button onClick={() => retry()} type="button">
        Retry
      </button>
    </div>
  );
}