Compare commits

...

3 commits

Author SHA1 Message Date
radishsoups
8058989d83
Merge d331d8ed46 into 0144adcdd1 2026-04-28 07:57:18 -04:00
0144adcdd1 feat: scroll to top when pagination change 2026-04-28 12:46:27 +01:00
75082ead7b fix: broken analytics 2026-04-28 12:17:41 +01:00
2 changed files with 10 additions and 1 deletions

View file

@ -54,7 +54,7 @@
</script> </script>
<link href="/src/index.css" rel="stylesheet" /> <link href="/src/index.css" rel="stylesheet" />
<script defer src="https://analytics.trafficlunar.net/script.js" data-website-id="bc530384-9b7d-471a-b2e3-f9859da50c24"></script> <script defer src="https://analytics.trafficlunar.net/script.js" data-website-id="1fb21e50-8f85-40cc-8475-647872173bc6"></script>
</head> </head>
<body> <body>
<div id="root"></div> <div id="root"></div>

View file

@ -11,6 +11,10 @@ export default function Pagination({ lastPage }: Props) {
const [searchParams] = useSearchParams(); const [searchParams] = useSearchParams();
const page = Number(searchParams.get("page") ?? 1); const page = Number(searchParams.get("page") ?? 1);
const scrollToTop = useCallback(() => {
window.scrollTo({ top: 0 });
}, []);
const createPageUrl = useCallback( const createPageUrl = useCallback(
(pageNumber: number) => { (pageNumber: number) => {
const params = new URLSearchParams(searchParams); const params = new URLSearchParams(searchParams);
@ -37,6 +41,7 @@ export default function Pagination({ lastPage }: Props) {
{/* Go to first page */} {/* Go to first page */}
<Link <Link
to={page === 1 ? "#" : createPageUrl(1)} to={page === 1 ? "#" : createPageUrl(1)}
onClick={page === 1 ? undefined : scrollToTop}
aria-label="Go to First Page" aria-label="Go to First Page"
aria-disabled={page === 1} aria-disabled={page === 1}
tabIndex={page === 1 ? -1 : undefined} tabIndex={page === 1 ? -1 : undefined}
@ -48,6 +53,7 @@ export default function Pagination({ lastPage }: Props) {
{/* Previous page */} {/* Previous page */}
<Link <Link
to={page === 1 ? "#" : createPageUrl(page - 1)} to={page === 1 ? "#" : createPageUrl(page - 1)}
onClick={page === 1 ? undefined : scrollToTop}
aria-label="Go to Previous Page" aria-label="Go to Previous Page"
aria-disabled={page === 1} aria-disabled={page === 1}
tabIndex={page === 1 ? -1 : undefined} tabIndex={page === 1 ? -1 : undefined}
@ -62,6 +68,7 @@ export default function Pagination({ lastPage }: Props) {
<Link <Link
key={number} key={number}
to={createPageUrl(number)} to={createPageUrl(number)}
onClick={scrollToTop}
aria-label={`Go to Page ${number}`} aria-label={`Go to Page ${number}`}
aria-current={number === page ? "page" : undefined} aria-current={number === page ? "page" : undefined}
className={`pill p-0! w-8 h-8 text-center rounded-md! ${number == page ? "bg-orange-400!" : "bg-orange-100! hover:bg-orange-400!"}`} className={`pill p-0! w-8 h-8 text-center rounded-md! ${number == page ? "bg-orange-400!" : "bg-orange-100! hover:bg-orange-400!"}`}
@ -74,6 +81,7 @@ export default function Pagination({ lastPage }: Props) {
{/* Next page */} {/* Next page */}
<Link <Link
to={page >= lastPage ? "#" : createPageUrl(page + 1)} to={page >= lastPage ? "#" : createPageUrl(page + 1)}
onClick={page >= lastPage ? undefined : scrollToTop}
aria-label="Go to Next Page" aria-label="Go to Next Page"
aria-disabled={page >= lastPage} aria-disabled={page >= lastPage}
tabIndex={page >= lastPage ? -1 : undefined} tabIndex={page >= lastPage ? -1 : undefined}
@ -85,6 +93,7 @@ export default function Pagination({ lastPage }: Props) {
{/* Go to last page */} {/* Go to last page */}
<Link <Link
to={page >= lastPage ? "#" : createPageUrl(lastPage)} to={page >= lastPage ? "#" : createPageUrl(lastPage)}
onClick={page >= lastPage ? undefined : scrollToTop}
aria-label="Go to Last Page" aria-label="Go to Last Page"
aria-disabled={page >= lastPage} aria-disabled={page >= lastPage}
tabIndex={page >= lastPage ? -1 : undefined} tabIndex={page >= lastPage ? -1 : undefined}