62 lines
1.5 KiB
TypeScript
62 lines
1.5 KiB
TypeScript
import Link from "next/link";
|
|
|
|
export function Pager({
|
|
basePath,
|
|
prevCursor,
|
|
nextCursor,
|
|
page = 1,
|
|
extra = {},
|
|
}: {
|
|
basePath: string;
|
|
prevCursor?: string | null;
|
|
nextCursor?: string | null;
|
|
page?: number;
|
|
extra?: Record<string, string | undefined>;
|
|
}) {
|
|
const make = ({
|
|
nextPage,
|
|
nextPageCursor,
|
|
back,
|
|
}: {
|
|
nextPage: number;
|
|
nextPageCursor?: string;
|
|
back?: boolean;
|
|
}) => {
|
|
const sp = new URLSearchParams();
|
|
for (const [k, v] of Object.entries(extra)) if (v) sp.set(k, v);
|
|
if (nextPageCursor) sp.set("cursor", nextPageCursor);
|
|
if (back) sp.set("back", "1");
|
|
if (nextPage > 1) sp.set("page", String(nextPage));
|
|
const qs = sp.toString();
|
|
return qs ? `${basePath}?${qs}` : basePath;
|
|
};
|
|
|
|
const previousHref =
|
|
page > 1 && prevCursor
|
|
? make({ nextPage: page - 1, nextPageCursor: prevCursor, back: true })
|
|
: null;
|
|
const nextHref = nextCursor
|
|
? make({ nextPage: page + 1, nextPageCursor: nextCursor })
|
|
: null;
|
|
|
|
return (
|
|
<div className="mt-4 flex justify-between text-sm">
|
|
{previousHref ? (
|
|
<Link href={previousHref} className="text-blue-300 hover:text-blue-200">
|
|
← prev
|
|
</Link>
|
|
) : (
|
|
<span className="text-neutral-600">← prev</span>
|
|
)}
|
|
<span className="text-neutral-500">page {page}</span>
|
|
{nextHref ? (
|
|
<Link href={nextHref} className="text-blue-300 hover:text-blue-200">
|
|
next →
|
|
</Link>
|
|
) : (
|
|
<span className="text-neutral-600">end</span>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|