From ce185607dbd101c0839b65631ef3c0ba60a91157 Mon Sep 17 00:00:00 2001
From: Keane Chan <e0425601@u.nus.edu>
Date: Sun, 23 Oct 2022 01:00:23 +0800
Subject: [PATCH] [resumes][feat] use pagination component for resume pdf

---
 .../src/components/resumes/ResumePdf.tsx      | 37 ++++++-------------
 1 file changed, 12 insertions(+), 25 deletions(-)

diff --git a/apps/portal/src/components/resumes/ResumePdf.tsx b/apps/portal/src/components/resumes/ResumePdf.tsx
index caa53063..18c53931 100644
--- a/apps/portal/src/components/resumes/ResumePdf.tsx
+++ b/apps/portal/src/components/resumes/ResumePdf.tsx
@@ -3,12 +3,10 @@ import { useEffect, useState } from 'react';
 import { Document, Page, pdfjs } from 'react-pdf';
 import type { PDFDocumentProxy } from 'react-pdf/node_modules/pdfjs-dist';
 import {
-  ArrowLeftIcon,
-  ArrowRightIcon,
   MagnifyingGlassMinusIcon,
   MagnifyingGlassPlusIcon,
 } from '@heroicons/react/20/solid';
-import { Button, Spinner } from '@tih/ui';
+import { Button, Pagination, Spinner } from '@tih/ui';
 
 pdfjs.GlobalWorkerOptions.workerSrc = `//unpkg.com/pdfjs-dist@${pdfjs.version}/build/pdf.worker.min.js`;
 
@@ -86,28 +84,17 @@ export default function ResumePdf({ url }: Props) {
           </div>
         </Document>
       </div>
-
-      <div className="flex flex-row items-center justify-between p-4">
-        <Button
-          disabled={pageNumber === 1}
-          icon={ArrowLeftIcon}
-          isLabelHidden={true}
-          label="Previous"
-          variant="tertiary"
-          onClick={() => setPageNumber(pageNumber - 1)}
-        />
-        <p className="text-md text-gray-600">
-          Page {pageNumber} of {numPages}
-        </p>
-        <Button
-          disabled={pageNumber >= numPages}
-          icon={ArrowRightIcon}
-          isLabelHidden={true}
-          label="Next"
-          variant="tertiary"
-          onClick={() => setPageNumber(pageNumber + 1)}
-        />
-      </div>
+      {numPages > 1 && (
+        <div className="flex justify-center p-4">
+          <Pagination
+            current={pageNumber}
+            end={numPages}
+            label="pagination"
+            start={1}
+            onSelect={(page) => setPageNumber(page)}
+          />
+        </div>
+      )}
     </div>
   );
 }