ZenBrowserMirrors/www
1
0
Fork 0
mirror of https://github.com/zen-browser/www.git synced 2025-07-08 01:10:02 +02:00
Code Issues Projects Releases Packages Wiki Activity

refactor(ModsList): replace anchor tags with buttons for pagination navigation

Browse source
This commit is contained in:
Jason Tame 2025-03-30 17:37:42 +02:00
parent 8d13b79bc8
commit f47171bad3
1 changed files with 11 additions and 15 deletions
Download patch file Download diff file Expand all files Collapse all files

26
src/components/ModsList.tsx
View file

@ -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) {
}`} }`}
> >
&lt; &lt;
</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) {
}`} }`}
> >
&gt; &gt;
</a> </button>
</div> </div>
) )
} }