algorithm/tech-interview-handbook
1
0
Fork 0
mirror of https://github.com/yangshun/tech-interview-handbook.git synced 2025-07-28 12:43:12 +08:00
Code Issues Packages Projects Releases Wiki Activity

[resumes][feat] use pagination component for resume pdf

Browse Source
This commit is contained in:
Keane Chan
2022-10-23 01:00:23 +08:00
parent 862bb53cdb
commit ce185607db
1 changed files with 12 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

37
apps/portal/src/components/resumes/ResumePdf.tsx
View File

@ -3,12 +3,10 @@ import { useEffect, useState } from 'react';
import { Document, Page, pdfjs } from 'react-pdf'; import { Document, Page, pdfjs } from 'react-pdf';
import type { PDFDocumentProxy } from 'react-pdf/node_modules/pdfjs-dist'; import type { PDFDocumentProxy } from 'react-pdf/node_modules/pdfjs-dist';
import { import {
ArrowLeftIcon,
ArrowRightIcon,
MagnifyingGlassMinusIcon, MagnifyingGlassMinusIcon,
MagnifyingGlassPlusIcon, MagnifyingGlassPlusIcon,
} from '@heroicons/react/20/solid'; } 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`; 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> </div>
</Document> </Document>
</div> </div>
{numPages > 1 && (
<div className="flex flex-row items-center justify-between p-4"> <div className="flex justify-center p-4">
<Button <Pagination
disabled={pageNumber === 1} current={pageNumber}
icon={ArrowLeftIcon} end={numPages}
isLabelHidden={true} label="pagination"
label="Previous" start={1}
variant="tertiary" onSelect={(page) => setPageNumber(page)}
onClick={() => setPageNumber(pageNumber - 1)} />
/> </div>
<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>
</div> </div>
); );
} }