98 lines
2.9 KiB
TypeScript
98 lines
2.9 KiB
TypeScript
"use client";
|
|
|
|
import { useSearchParams } from "next/navigation";
|
|
import Link from "next/link";
|
|
|
|
import { useMemo } 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 createPageUrl = (pageNumber: number) => {
|
|
const params = new URLSearchParams(searchParams);
|
|
params.set("page", pageNumber.toString());
|
|
return `/?${params.toString()}`;
|
|
};
|
|
|
|
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 ? "#" : createPageUrl(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 ? "#" : createPageUrl(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={createPageUrl(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 ? "#" : createPageUrl(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 ? "#" : createPageUrl(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>
|
|
);
|
|
}
|