2020-11-28 03:35:36 +00:00
|
|
|
import React from 'react';
|
2021-05-02 01:03:17 +00:00
|
|
|
import { prevPageLink, paginationNav, nextPageLink } from './pagination.module.css';
|
2020-11-28 03:35:36 +00:00
|
|
|
|
|
|
|
interface Pagination {
|
|
|
|
currentPage: number;
|
|
|
|
numPages: number;
|
|
|
|
rootPath: string;
|
|
|
|
}
|
|
|
|
|
|
|
|
export default ({
|
|
|
|
currentPage,
|
|
|
|
numPages,
|
|
|
|
rootPath,
|
|
|
|
}: Pagination): JSX.Element => {
|
2021-05-02 01:03:17 +00:00
|
|
|
let prevPageLinkItem = null;
|
2020-11-28 03:35:36 +00:00
|
|
|
if (currentPage === 2) {
|
2021-05-02 01:03:17 +00:00
|
|
|
prevPageLinkItem = (
|
|
|
|
<a href={rootPath} className={prevPageLink}>
|
2020-11-28 03:35:36 +00:00
|
|
|
<<
|
|
|
|
</a>
|
|
|
|
);
|
|
|
|
} else if (currentPage !== 1) {
|
2021-05-02 01:03:17 +00:00
|
|
|
prevPageLinkItem = (
|
2020-11-28 03:35:36 +00:00
|
|
|
<a
|
|
|
|
href={rootPath + '/' + (currentPage - 1)}
|
2021-05-02 01:03:17 +00:00
|
|
|
className={prevPageLink}
|
2020-11-28 03:35:36 +00:00
|
|
|
>
|
|
|
|
<<
|
|
|
|
</a>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|
|
|
|
if (numPages !== 1) {
|
|
|
|
return (
|
2021-05-02 01:03:17 +00:00
|
|
|
<p className={paginationNav}>
|
|
|
|
{prevPageLinkItem}
|
2020-11-28 03:35:36 +00:00
|
|
|
{currentPage}
|
|
|
|
{currentPage !== numPages && (
|
|
|
|
<a
|
|
|
|
href={rootPath + '/' + (currentPage + 1)}
|
2021-05-02 01:03:17 +00:00
|
|
|
className={nextPageLink}
|
2020-11-28 03:35:36 +00:00
|
|
|
>
|
|
|
|
>>
|
|
|
|
</a>
|
|
|
|
)}
|
|
|
|
</p>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|
|
|
|
return null;
|
|
|
|
};
|