package changed for pdf view

Author: sinanptm

components/ui/pdfViewer.tsx

@@ -1,45 +1,57 @@
+// components/ui/pdfViewer.tsx
 "use client";
-import { useState, useEffect, useCallback } from "react";
-import { Viewer, Worker } from "@react-pdf-viewer/core";
-import "@react-pdf-viewer/core/lib/styles/index.css";
-import { defaultLayoutPlugin } from "@react-pdf-viewer/default-layout";
-import "@react-pdf-viewer/default-layout/lib/styles/index.css";
+import { useState } from 'react';
+import { Document, Page, pdfjs } from 'react-pdf';
+import 'react-pdf/dist/esm/Page/AnnotationLayer.css';
+import 'react-pdf/dist/esm/Page/TextLayer.css';
 
-const PdfViewer = ({ url }: { url: string }) => {
-    const defaultLayoutPluginInstance = defaultLayoutPlugin();
-
-    const [scale, setScale] = useState(1.3);
-
-    const calculateScale = useCallback(() => {
-        const width = window.innerWidth;
-        return width < 768 ? 0.65 : 1.3; 
-    }, []);
+pdfjs.GlobalWorkerOptions.workerSrc = `//unpkg.com/pdfjs-dist@${pdfjs.version}/build/pdf.worker.min.js`;
 
-    useEffect(() => {
-        const handleResize = () => {
-            setScale(calculateScale());
-        };
-
-        setScale(calculateScale());
-        window.addEventListener("resize", handleResize);
+const PdfViewer = ({ url }: { url: string }) => {
+    const [numPages, setNumPages] = useState<number>();
+    const [pageNumber, setPageNumber] = useState(1);
 
-        return () => window.removeEventListener("resize", handleResize);
-    }, [calculateScale]); 
+    function onDocumentLoadSuccess({ numPages }: { numPages: number }) {
+        setNumPages(numPages);
+    }
 
     return (
-        <div className="h-screen w-screen">
-            <Worker workerUrl="https://unpkg.com/[email protected]/build/pdf.worker.min.js">
-                <Viewer
-                    fileUrl={url}
-                    initialPage={0}
-                    enableSmoothScroll
-                    defaultScale={scale}
-                    theme={"dark"}
-                    plugins={[defaultLayoutPluginInstance]}
+        <div className="h-screen w-screen overflow-auto flex flex-col items-center">
+            <Document 
+                file={url}
+                onLoadSuccess={onDocumentLoadSuccess}
+                className="max-w-full"
+            >
+                <Page 
+                    pageNumber={pageNumber} 
+                    renderTextLayer={false}
+                    renderAnnotationLayer={false}
+                    width={window.innerWidth > 768 ? 800 : window.innerWidth * 0.9}
                 />
-            </Worker>
+            </Document>
+            <div className="text-center mt-4">
+                <p>Page {pageNumber} of {numPages}</p>
+                {numPages && (
+                    <div className="flex justify-center space-x-4 mt-2">
+                        <button 
+                            onClick={() => setPageNumber(prev => Math.max(1, prev - 1))}
+                            disabled={pageNumber <= 1}
+                            className="px-4 py-2 bg-blue-500 text-white disabled:opacity-50"
+                        >
+                            Previous
+                        </button>
+                        <button 
+                            onClick={() => setPageNumber(prev => Math.min(numPages, prev + 1))}
+                            disabled={pageNumber >= (numPages || 0)}
+                            className="px-4 py-2 bg-blue-500 text-white disabled:opacity-50"
+                        >
+                            Next
+                        </button>
+                    </div>
+                )}
+            </div>
         </div>
     );
 };
 
-export default PdfViewer;
+export default PdfViewer;

package.json

@@ -18,7 +18,7 @@
   "scripts": {
     "dev": "next dev",
     "postbuild": "next-sitemap",
-    "postinstall": "pnpm rebuild canvas",
+    "postinstall": "pnpm rebuild",
     "build": "next build",
     "start": "next start",
     "lint": "next lint"
@@ -33,24 +33,22 @@
     "@radix-ui/react-slot": "^1.1.1",
     "@radix-ui/react-toast": "^1.2.4",
     "@radix-ui/react-tooltip": "^1.1.6",
-    "@react-pdf-viewer/core": "^3.12.0",
-    "@react-pdf-viewer/default-layout": "^3.12.0",
     "@react-three/drei": "^9.120.6",
     "@react-three/fiber": "^8.17.10",
     "@tabler/icons-react": "^3.28.1",
     "@vercel/analytics": "^1.4.1",
     "@vercel/speed-insights": "^1.1.0",
     "autoprefixer": "^10.4.20",
-    "canvas": "^3.1.0",
     "class-variance-authority": "^0.7.1",
+    "react-pdf": "^7.7.1",
+    "pdfjs-dist": "^4.10.38",
     "clsx": "^2.1.1",
     "framer-motion": "^11.16.1",
     "mini-svg-data-uri": "^1.4.4",
     "next": "14.2.15",
     "next-sitemap": "^4.2.3",
     "next-themes": "^0.3.0",
     "nodemailer": "^6.9.16",
-    "pdfjs-dist": "^4.10.38",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "recharts": "^2.15.0",