implemented pdf viewer functionality.

src/components/PdfViewer.jsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useState } from "react";
 import { Document, Page, pdfjs } from "react-pdf";
 import "react-pdf/dist/Page/TextLayer.css";
 import "react-pdf/dist/Page/AnnotationLayer.css";
@@ -9,13 +9,40 @@ export default function PdfViewer({ file }) {
     import.meta.url,
   ).toString();
 
+  const [numPages, setNumPages] = useState(0);
+  const [pageNumber, setPageNumber] = useState(1);
+  function prev() {
+    if (pageNumber >= 2) {
+      setPageNumber(pageNumber - 1);
+    }
+  }
+
+  function next() {
+    if (pageNumber < numPages - 1) {
+      setPageNumber(pageNumber + 1);
+    }
+  }
+
+  console.log("numPages: " + numPages);
+  console.log("pageNumber: " + pageNumber);
+
   return (
     <>
       <div className="pdf-container">
-        <Document file={file}>
-          <Page pageNumber={1} />
-          <Page pageNumber={2} />
+        <button className="pdf-button shadow" onClick={() => prev()}>
+          <span className="material-icons">arrow_back</span>
+        </button>
+        <Document
+          file={file}
+          onLoadSuccess={({ numPages: numPagesInPdf }) => {
+            setNumPages(numPagesInPdf);
+          }}
+        >
+          <Page pageNumber={pageNumber} />
         </Document>
+        <button className="pdf-button shadow" onClick={() => next()}>
+          <span className="material-icons">arrow_forward</span>
+        </button>
       </div>
     </>
   );