index.tsx)¶

Overview¶

PDF viewer interface that provides document viewing capabilities with custom toolbar and download options.

Features¶

PDF document viewing
Custom toolbar configuration
Document download functionality
Save functionality
Responsive layout
Session-based document loading

URL Parameters¶

None - authenticated route

Implementation¶

State Management¶

// Uses refs for container management
const containerRef = useRef<HTMLDivElement | null>(null);

Methods¶

const loadPSPDFKit = async () =>
// Initializes PSPDFKit viewer with custom configuration

function handleDownload() =>
// Handles document download functionality

HTML Structure¶

<div className="mt-2vh mb-6 justify-center">
  <h1 className="font-bold text-blue-925 text-3xl text-center mb-2 mt-2">Viewer</h1>
  <Card className="h-auto w-full max-w-4xl mx-auto mt-6">
    <CardFooter>
      {/* Save and Download buttons */}
    </CardFooter>
    <CardContent>
      <div className="h-[36rem] w-full" ref={containerRef} />
    </CardContent>
  </Card>
</div>

Props¶

No props - page component

Components/API Routes Used¶

Components¶

API Routes¶

None - uses session storage for document URL

Routes to Page¶

Direct: /viewer
From: Document preview actions
From: PDF viewing links

Dependencies¶

import PSPDFKit from 'pspdfkit'
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardFooter } from "@/components/ui/card"
import { Download, Save } from 'lucide-react'

Notes¶

Uses PSPDFKit for PDF rendering
Requires document URL in session storage
Custom toolbar configuration
Responsive viewer sizing
Handles document downloads
Supports save functionality
Initial zoom set to 0.9