mirror of
https://github.com/trafficlunar/tomodachi-share.git
synced 2026-05-13 13:17:45 +00:00
Compare commits
2 commits
09a70a87bd
...
0144adcdd1
| Author | SHA1 | Date | |
|---|---|---|---|
| 0144adcdd1 | |||
| 75082ead7b |
2 changed files with 10 additions and 1 deletions
|
|
@ -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>
|
||||||
|
|
|
||||||
|
|
@ -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}
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue