File size: 2,708 Bytes
3b6afc0 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 |
import React from 'react';
type TPluginPaginationProps = {
currentPage: number;
maxPage: number;
onChangePage: (page: number) => void;
};
const PluginPagination: React.FC<TPluginPaginationProps> = ({
currentPage,
maxPage,
onChangePage,
}) => {
const pages = [...Array(maxPage).keys()].map((i) => i + 1);
const handlePageChange = (page: number) => {
if (page < 1 || page > maxPage) {
return;
}
onChangePage(page);
};
return (
<div className="flex gap-2 text-sm text-black/60 dark:text-white/70">
<div
role="button"
aria-label="Previous page"
onClick={() => handlePageChange(currentPage - 1)}
className={`flex cursor-default items-center text-sm ${
currentPage === 1
? 'text-black/70 opacity-50 dark:text-white/70'
: 'text-black/70 hover:text-black/50 dark:text-white/70 dark:hover:text-white/50'
}`}
>
<svg
stroke="currentColor"
fill="none"
strokeWidth="2"
viewBox="0 0 24 24"
strokeLinecap="round"
strokeLinejoin="round"
className="h-4 w-4"
height="1em"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<polyline points="15 18 9 12 15 6"></polyline>
</svg>
Prev
</div>
{pages.map((page) => (
<div
role="button"
key={page}
className={`flex h-5 w-5 items-center justify-center text-sm ${
currentPage === page
? 'text-blue-600 hover:text-blue-600 dark:text-blue-600 dark:hover:text-blue-600'
: 'text-black/70 hover:text-black/50 dark:text-white/70 dark:hover:text-white/50'
}`}
onClick={() => onChangePage(page)}
>
{page}
</div>
))}
<div
role="button"
aria-label="Next page"
onClick={() => handlePageChange(currentPage + 1)}
className={`flex cursor-default items-center text-sm ${
currentPage === maxPage
? 'text-black/70 opacity-50 dark:text-white/70'
: 'text-black/70 hover:text-black/50 dark:text-white/70 dark:hover:text-white/50'
}`}
>
Next
<svg
stroke="currentColor"
fill="none"
strokeWidth="2"
viewBox="0 0 24 24"
strokeLinecap="round"
strokeLinejoin="round"
className="h-4 w-4"
height="1em"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<polyline points="9 18 15 12 9 6"></polyline>
</svg>
</div>
</div>
);
};
export default PluginPagination;
|