Split Viewer

1"use client";
2 
3import {
4  FileViewerContent,
5  FileViewerHeader,
6  FileViewerTitle,
7  FileViewerLegend,
8  FileViewer,
9  FileViewerProvider,
10  FileViewerSidebarTrigger,
11  FileViewerInset,
12  FileViewerControls,
13} from "@/components/ui/file-viewer";
14import { PdfViewerPages, PdfViewerProvider } from "@/components/ui/pdf-viewer";
15import type { SplitView } from "@/components/viewers/lib/split-types";
16import {
17  SplitViewerDocument,
18  SplitViewerLegend,
19  SplitViewerProvider,
20  SplitViewerSidebar,
21  useSplitViewerDocumentControls,
22} from "@/components/viewers/split/split-viewer";
23 
24const PDF_URL = "/samples/an-image-is-worth-16x16-words.pdf";
25 
26// A split result: named subdocuments, each owning a 1-indexed page range.
27const SPLIT_RESULT: SplitView = {
28  output: [
29    { name: "Title, Abstract & Introduction", pages: [1] },
30    { name: "Related Work", pages: [2] },
31    { name: "Method", pages: [3] },
32    { name: "Experiments", pages: [4, 5, 6, 7, 8] },
33    { name: "Conclusion & References", pages: [9, 10, 11, 12] },
34    { name: "Appendix", pages: [13, 14, 15, 16, 17, 18, 19, 20, 21, 22] },
35  ],
36};
37 
38/**
39 * Split viewer block — the file + sidebar + legend system over a split result.
40 * `SplitViewer` owns the legend and page rail; the document prop reads page
41 * and scroll controls from the split provider.
42 */
43export function SplitViewerBlock() {
44  const source = {
45    kind: "url" as const,
46    url: PDF_URL,
47    fileName: "an-image-is-worth-16x16-words.pdf",
48  };
49 
50  return (
51    <div className="bg-background flex h-full min-h-[680px] flex-col">
52      <SplitViewerProvider result={SPLIT_RESULT}>
53        <FileViewerProvider source={source} defaultSidebarOpen>
54          <FileViewer className="bg-background">
55            <PdfViewerProvider>
56              <FileViewerHeader>
57                  <FileViewerSidebarTrigger className="-ms-1" />
58                  <FileViewerTitle />
59                  <FileViewerControls />
60              </FileViewerHeader>
61              <FileViewerContent>
62                <SplitViewerSidebar />
63                <FileViewerInset>
64                  <FileViewerLegend>
65                    <SplitViewerLegend className="px-3 py-2" />
66                  </FileViewerLegend>
67                  <SplitViewerDocument document={<SplitViewerPdfDocument />} />
68                </FileViewerInset>
69              </FileViewerContent>
70            </PdfViewerProvider>
71          </FileViewer>
72        </FileViewerProvider>
73      </SplitViewerProvider>
74    </div>
75  );
76}
77 
78// … truncated