text: 
  import React, { useState } from "react";
  import { Document, Page } from "react-pdf";
  import css from './single-page.css';
  
  export default function SinglePage(props) {
    const [numPages, setNumPages] = useState(null);
    const [pageNumber, setPageNumber] = useState(1); //setting 1 to show fisrt page
  
    function onDocumentLoadSuccess({ numPages }) {
      setNumPages(numPages);
      setPageNumber(1);
    }
  
    function changePage(offset) {
      setPageNumber(prevPageNumber => prevPageNumber + offset);
    }
  
    function previousPage() {
      changePage(-1);
    }
  
    function nextPage() {
      changePage(1);
    }
  
    const { pdf } = props;
  
    return (
      <>
        <Document
          file={pdf}
          options={{ workerSrc: "/pdf.worker.js" }}
          onLoadSuccess={onDocumentLoadSuccess}
        >
          <Page pageNumber={pageNumber} />
        </Document>
        <div className={css.buttonsAndPaging}>
  
          <div className={css.buttonPrev}>
          <button type="button" disabled={pageNumber <= 1} onClick={previousPage}>
            Previous
          </button>
          </div>
          <div className={css.paging}>
          <p>
            {pageNumber || (numPages ? 1 : "--")} of {numPages || "--"}
          </p>
          </div>
          <div className={css.buttonNext}>
          <button
            type="button"
            disabled={pageNumber >= numPages}
            onClick={nextPage}
          >
            Next
          </button>
          </div>
        </div>
      </>
    );
  }
  