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 { page, itemsPerPage, totalItems, setPage, scrollToTop } = props
const maxPage = Math.ceil(totalItems / itemsPerPage) - 1
return ( return (
<nav <nav
className="flex items-center justify-between border-t border-gray-200 bg-white px-4 py-3 sm:px-6" 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"> <div className="hidden sm:block">
<p className="text-sm text-gray-700"> <p className="text-sm text-gray-700">
Showing{' '} Showing <span className="font-medium">{page * itemsPerPage + 1}</span>{' '}
to{' '}
<span className="font-medium"> <span className="font-medium">
{page === 0 ? page + 1 : page * itemsPerPage} {Math.min(totalItems, (page + 1) * itemsPerPage)}
</span>{' '} </span>{' '}
to <span className="font-medium">{(page + 1) * itemsPerPage}</span> of{' '} of <span className="font-medium">{totalItems}</span> results
<span className="font-medium">{totalItems}</span> results
</p> </p>
</div> </div>
<div className="flex flex-1 justify-between sm:justify-end"> <div className="flex flex-1 justify-between sm:justify-end">
<a <a
href={scrollToTop ? '#' : undefined} 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)} onClick={() => page > 0 && setPage(page - 1)}
> >
Previous Previous
</a> </a>
<a <a
href={scrollToTop ? '#' : undefined} 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" 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 < totalItems / itemsPerPage && setPage(page + 1)} onClick={() => page < maxPage && setPage(page + 1)}
> >
Next Next
</a> </a>