trafficlunar/tomodachi-share
1
0
Fork 0
mirror of https://github.com/trafficlunar/tomodachi-share.git synced 2026-06-28 14:44:15 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat: pagination

Browse source
This commit is contained in:
trafficlunar 2025-04-13 20:00:33 +01:00
parent 3f4a757bb1
commit cada748f2d
3 changed files with 99 additions and 2 deletions
Download patch file Download diff file Expand all files Collapse all files

4
src/app/components/mii-list/index.tsx
View file

@ -8,6 +8,7 @@ import SortSelect from "./sort-select";
import Carousel from "../carousel";
import LikeButton from "../like-button";
import FilterSelect from "./filter-select";
import Pagination from "./pagination";
interface Props {
isLoggedIn: boolean;
@ -18,6 +19,7 @@ interface Props {
interface ApiResponse {
total: number;
filtered: number;
lastPage: number;
miis: {
id: number;
user?: {
@ -131,6 +133,8 @@ export default function MiiList({ isLoggedIn, userId }: Props) {
) : (
<>{error && <p className="text-xl text-red-400 font-semibold text-center mt-10">Error: {error}</p>}</>
)}
{data && <Pagination lastPage={data.lastPage} />}
</div>
);
}

92
src/app/components/mii-list/pagination.tsx Normal file
View file

@ -0,0 +1,92 @@
"use client";
import { redirect, useSearchParams } from "next/navigation";
import Link from "next/link";
import { useEffect, useMemo, useState } from "react";
import { Icon } from "@iconify/react";
interface Props {
lastPage: number;
}
export default function Pagination({ lastPage }: Props) {
const searchParams = useSearchParams();
const page = Number(searchParams.get("page") ?? 1);
const numbers = useMemo(() => {
const result = [];
// Always show 5 pages, centering around the current page when possible
const start = Math.max(1, Math.min(page - 2, lastPage - 4));
const end = Math.min(lastPage, start + 4);
for (let i = start; i <= end; i++) result.push(i);
return result;
}, [page, lastPage]);
return (
<div className="flex justify-center items-center w-full mt-8">
{/* Go to first page */}
<Link
href={page === 1 ? "#" : "/?page=1"}
aria-disabled={page === 1}
tabIndex={page === 1 ? -1 : undefined}
className={`pill button !bg-orange-100 !p-0.5 aspect-square text-2xl ${
page === 1 ? "pointer-events-none opacity-50" : "hover:!bg-orange-400"
}`}
>
<Icon icon="stash:chevron-double-left" />
</Link>
{/* Previous page */}
<Link
href={page === 1 ? "#" : `/?page=${page - 1}`}
aria-disabled={page === 1}
tabIndex={page === 1 ? -1 : undefined}
className={`pill !bg-orange-100 !p-0.5 aspect-square text-2xl ${page === 1 ? "pointer-events-none opacity-50" : "hover:!bg-orange-400"}`}
>
<Icon icon="stash:chevron-left" />
</Link>
{/* Page numbers */}
<div className="flex mx-2">
{numbers.map((number) => (
<Link
key={number}
href={`/?page=${number}`}
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"}`}
>
{number}
</Link>
))}
</div>
{/* Next page */}
<Link
href={page === lastPage ? "#" : `/?page=${page + 1}`}
aria-disabled={page === lastPage}
tabIndex={page === lastPage ? -1 : undefined}
className={`pill button !bg-orange-100 !p-0.5 aspect-square text-2xl ${
page === lastPage ? "pointer-events-none opacity-50" : "hover:!bg-orange-400"
}`}
>
<Icon icon="stash:chevron-right" />
</Link>
{/* Go to last page */}
<Link
href={page === lastPage ? "#" : `/?page=${lastPage}`}
aria-disabled={page === lastPage}
tabIndex={page === lastPage ? -1 : undefined}
className={`pill button !bg-orange-100 !p-0.5 aspect-square text-2xl ${
page === lastPage ? "pointer-events-none opacity-50" : "hover:!bg-orange-400"
}`}
>
<Icon icon="stash:chevron-double-right" />
</Link>
</div>
);
}