55 lines
1.9 KiB
TypeScript
55 lines
1.9 KiB
TypeScript
|
type T = (k: string) => string;
|
||
|
|
|
||
|
|
export function ResourceListFooter({
|
||
|
|
page,
|
||
|
|
limit,
|
||
|
|
total,
|
||
|
|
t,
|
||
|
|
onPrev,
|
||
|
|
onNext,
|
||
|
|
}: {
|
||
|
|
page: number;
|
||
|
|
limit: number;
|
||
|
|
total: number;
|
||
|
|
t: T;
|
||
|
|
onPrev: () => void;
|
||
|
|
onNext: () => void;
|
||
|
|
}) {
|
||
|
|
const pages = Math.max(1, Math.ceil(total / limit));
|
||
|
|
const from = total === 0 ? 0 : (page - 1) * limit + 1;
|
||
|
|
const to = Math.min(page * limit, total);
|
||
|
|
return (
|
||
|
|
<div className="flex flex-col items-center justify-between gap-3 border-t border-ark-line pt-6 sm:flex-row">
|
||
|
|
<p className="text-sm text-neutral-400">
|
||
|
|
{t("listRange")
|
||
|
|
.replace("{{from}}", String(from))
|
||
|
|
.replace("{{to}}", String(to))
|
||
|
|
.replace("{{total}}", String(total))}
|
||
|
|
</p>
|
||
|
|
<div className="flex items-center gap-2">
|
||
|
|
<button
|
||
|
|
type="button"
|
||
|
|
disabled={page <= 1}
|
||
|
|
onClick={onPrev}
|
||
|
|
className="rounded-full border border-ark-line px-4 py-2 text-sm text-neutral-200 outline-none transition hover:border-ark-gold disabled:cursor-not-allowed disabled:opacity-40 focus-visible:ring-2 focus-visible:ring-ark-gold/80 focus-visible:ring-offset-2 focus-visible:ring-offset-ark-bg"
|
||
|
|
>
|
||
|
|
{t("paginationPrev")}
|
||
|
|
</button>
|
||
|
|
<span className="text-sm text-ark-muted tabular-nums">
|
||
|
|
{t("pageIndicator")
|
||
|
|
.replace("{{c}}", String(page))
|
||
|
|
.replace("{{p}}", String(pages))}
|
||
|
|
</span>
|
||
|
|
<button
|
||
|
|
type="button"
|
||
|
|
disabled={page >= pages}
|
||
|
|
onClick={onNext}
|
||
|
|
className="rounded-full border border-ark-line px-4 py-2 text-sm text-neutral-200 outline-none transition hover:border-ark-gold disabled:cursor-not-allowed disabled:opacity-40 focus-visible:ring-2 focus-visible:ring-ark-gold/80 focus-visible:ring-offset-2 focus-visible:ring-offset-ark-bg"
|
||
|
|
>
|
||
|
|
{t("paginationNext")}
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|