mirror of
https://github.com/zen-browser/www.git
synced 2025-07-08 01:10:02 +02:00
refactor(ModsList): replace anchor tags with buttons for pagination navigation
This commit is contained in:
parent
8d13b79bc8
commit
f47171bad3
1 changed files with 11 additions and 15 deletions
|
@ -73,23 +73,18 @@ export default function ModsList({ mods }: ModsListProps) {
|
||||||
setPageInput(target.value)
|
setPageInput(target.value)
|
||||||
}
|
}
|
||||||
|
|
||||||
function getPageUrl(pageNum: number) {
|
function navigatePage(pageNum: number) {
|
||||||
const params = new URLSearchParams(searchParams)
|
setPage(pageNum)
|
||||||
if (pageNum > 1) {
|
window.scrollTo(0, 0)
|
||||||
params.set('page', pageNum.toString())
|
|
||||||
} else {
|
|
||||||
params.delete('page')
|
|
||||||
}
|
|
||||||
const queryString = params.toString()
|
|
||||||
return `/mods${queryString ? `?${queryString}` : ''}`
|
|
||||||
}
|
}
|
||||||
|
|
||||||
function renderPagination() {
|
function renderPagination() {
|
||||||
if (totalPages <= 1) return null
|
if (totalPages <= 1) return null
|
||||||
return (
|
return (
|
||||||
<div className="mx-auto mb-12 flex items-center justify-center gap-4 px-8">
|
<div className="mx-auto mb-12 flex items-center justify-center gap-4 px-8">
|
||||||
<a
|
<button
|
||||||
href={getPageUrl(page - 1)}
|
type="button"
|
||||||
|
onClick={() => navigatePage(page - 1)}
|
||||||
className={`px-3 py-2 ${
|
className={`px-3 py-2 ${
|
||||||
page === 1
|
page === 1
|
||||||
? 'pointer-events-none text-gray-400'
|
? 'pointer-events-none text-gray-400'
|
||||||
|
@ -97,7 +92,7 @@ export default function ModsList({ mods }: ModsListProps) {
|
||||||
}`}
|
}`}
|
||||||
>
|
>
|
||||||
<
|
<
|
||||||
</a>
|
</button>
|
||||||
<form onSubmit={handlePageSubmit} className="flex items-center gap-2">
|
<form onSubmit={handlePageSubmit} className="flex items-center gap-2">
|
||||||
<span className="text-sm">Page</span>
|
<span className="text-sm">Page</span>
|
||||||
<input
|
<input
|
||||||
|
@ -111,8 +106,9 @@ export default function ModsList({ mods }: ModsListProps) {
|
||||||
of {totalPages} ({totalItems} items)
|
of {totalPages} ({totalItems} items)
|
||||||
</span>
|
</span>
|
||||||
</form>
|
</form>
|
||||||
<a
|
<button
|
||||||
href={getPageUrl(page + 1)}
|
type="button"
|
||||||
|
onClick={() => navigatePage(page + 1)}
|
||||||
className={`px-3 py-2 ${
|
className={`px-3 py-2 ${
|
||||||
page === totalPages
|
page === totalPages
|
||||||
? 'pointer-events-none text-gray-400'
|
? 'pointer-events-none text-gray-400'
|
||||||
|
@ -120,7 +116,7 @@ export default function ModsList({ mods }: ModsListProps) {
|
||||||
}`}
|
}`}
|
||||||
>
|
>
|
||||||
>
|
>
|
||||||
</a>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue