53 lines
1.5 KiB
TypeScript
53 lines
1.5 KiB
TypeScript
'use client';
|
|
|
|
import { Document, Page, pdfjs } from 'react-pdf';
|
|
import 'react-pdf/dist/Page/AnnotationLayer.css';
|
|
import 'react-pdf/dist/Page/TextLayer.css';
|
|
import { useState } from 'react';
|
|
|
|
// Set worker from public directory
|
|
pdfjs.GlobalWorkerOptions.workerSrc = '/pdf.worker.mjs';
|
|
|
|
interface PDFViewerProps {
|
|
pdfFile: string;
|
|
}
|
|
|
|
export function PDFViewer({ pdfFile }: PDFViewerProps) {
|
|
const [numPages, setNumPages] = useState<number>();
|
|
|
|
function onDocumentLoadSuccess({ numPages }: { numPages: number }): void {
|
|
setNumPages(numPages);
|
|
}
|
|
|
|
return (
|
|
<div className="flex flex-col items-center">
|
|
<Document
|
|
file={pdfFile}
|
|
onLoadSuccess={onDocumentLoadSuccess}
|
|
className="flex flex-col items-center"
|
|
>
|
|
{Array.from(
|
|
new Array(numPages),
|
|
(el, index) => (
|
|
<div key={`page_${index + 1}`}>
|
|
<div className="bg-offbase my-4 px-2 py-0.5 rounded-full w-fit">
|
|
<p className="text-xs">
|
|
{index + 1} / {numPages}
|
|
</p>
|
|
</div>
|
|
<div className="flex justify-center">
|
|
<Page
|
|
pageNumber={index + 1}
|
|
renderAnnotationLayer={true}
|
|
renderTextLayer={true}
|
|
className="rounded-xl shadow-lg"
|
|
scale={1.2}
|
|
/>
|
|
</div>
|
|
</div>
|
|
),
|
|
)}
|
|
</Document>
|
|
</div>
|
|
);
|
|
}
|