Fascinated/scoresaber-reloaded-v2
1
2
Fork 0
Code Issues 1 Pull Requests 10 Actions Activity

make pagination better
All checks were successful
deploy / deploy (push) Successful in 1m3s
Details

Browse Source
This commit is contained in:
Lee 2023-10-20 21:16:07 +01:00
parent 879d9939cb
commit 26703bfb74
1 changed files with 31 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
src/components/Pagination.tsx
View File

@ -36,6 +36,21 @@ export default function Pagination(props: PaginationProps) {
</button>
</li>
)}
{currentPage !== 1 && currentPage - 2 > 1 && (
<>
<li>
<button
className="rounded-md bg-neutral-700 px-3 py-1 hover:opacity-80"
onClick={() => onPageChange(1)}
>
1
</button>
</li>
<p>...</p>
</>
)}
{pageNumbers.map((pageNumber) => (
<li key={pageNumber}>
<button
@ -50,6 +65,22 @@ export default function Pagination(props: PaginationProps) {
</button>
</li>
))}
{currentPage !== totalPages && currentPage + 2 < totalPages && (
<>
<p>...</p>
<li>
<button
className="rounded-md bg-neutral-700 px-3 py-1 hover:opacity-80"
onClick={() => onPageChange(totalPages)}
>
{totalPages}
</button>
</li>
</>
)}
{currentPage < totalPages && (
<li className="rounded-md bg-neutral-700 hover:opacity-80">
<button