open.source/manifold
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Fix pagination component going one page too far + tweaks

Browse Source
This commit is contained in:
James Grugett 2022-07-13 15:15:03 -05:00
parent 9075a6f33a
commit e868f0a15a
1 changed files with 9 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
web/components/pagination.tsx
View File

@ -7,6 +7,8 @@ export function Pagination(props: {
}) {
const { page, itemsPerPage, totalItems, setPage, scrollToTop } = props
const maxPage = Math.ceil(totalItems / itemsPerPage) - 1
return (
<nav
className="flex items-center justify-between border-t border-gray-200 bg-white px-4 py-3 sm:px-6"
@ -14,26 +16,26 @@ export function Pagination(props: {
>
<div className="hidden sm:block">
<p className="text-sm text-gray-700">
Showing{' '}
Showing <span className="font-medium">{page * itemsPerPage + 1}</span>{' '}
to{' '}
<span className="font-medium">
{page === 0 ? page + 1 : page * itemsPerPage}
{Math.min(totalItems, (page + 1) * itemsPerPage)}
</span>{' '}
to <span className="font-medium">{(page + 1) * itemsPerPage}</span> of{' '}
<span className="font-medium">{totalItems}</span> results
of <span className="font-medium">{totalItems}</span> results
</p>
</div>
<div className="flex flex-1 justify-between sm:justify-end">
<a
href={scrollToTop ? '#' : undefined}
className="relative inline-flex items-center rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50"
className="relative inline-flex cursor-pointer select-none items-center rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50"
onClick={() => page > 0 && setPage(page - 1)}
>
Previous
</a>
<a
href={scrollToTop ? '#' : undefined}
className="relative ml-3 inline-flex items-center rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50"
onClick={() => page < totalItems / itemsPerPage && setPage(page + 1)}
className="relative ml-3 inline-flex cursor-pointer select-none items-center rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50"
onClick={() => page < maxPage && setPage(page + 1)}
>
Next
</a>