59 lines
1.6 KiB
TypeScript
59 lines
1.6 KiB
TypeScript
"use client";
|
|
|
|
import { ChevronLeft, ChevronRight } from "lucide-react";
|
|
|
|
/** 紧凑上一页 / n / N / 下一页（客户端列表） */
|
|
export default function AdminPager({
|
|
page,
|
|
total,
|
|
pageSize,
|
|
onChange,
|
|
loading,
|
|
summary,
|
|
className = "",
|
|
}: {
|
|
page: number;
|
|
total: number;
|
|
pageSize: number;
|
|
onChange: (page: number) => void;
|
|
loading?: boolean;
|
|
/** 左侧摘要，默认「第 n / N 页」 */
|
|
summary?: string;
|
|
className?: string;
|
|
}) {
|
|
const totalPages = Math.max(1, Math.ceil(total / pageSize));
|
|
if (totalPages <= 1 && total === 0) return null;
|
|
if (totalPages <= 1) return null;
|
|
|
|
return (
|
|
<div
|
|
className={`flex items-center justify-between gap-2 px-4 sm:px-5 py-3 ${className}`.trim()}
|
|
style={{ borderTop: "1px solid var(--line)" }}
|
|
>
|
|
<span className="meta text-[12px] tabular-nums" style={{ color: "var(--ink-3)" }}>
|
|
{summary ?? `第 ${page} / ${totalPages} 页`}
|
|
</span>
|
|
<div className="flex items-center gap-2">
|
|
<button
|
|
type="button"
|
|
onClick={() => onChange(page - 1)}
|
|
disabled={page <= 1 || loading}
|
|
className="btn btn-line btn-sm"
|
|
aria-label="上一页"
|
|
>
|
|
<ChevronLeft size={14} /> 上一页
|
|
</button>
|
|
<button
|
|
type="button"
|
|
onClick={() => onChange(page + 1)}
|
|
disabled={page >= totalPages || loading}
|
|
className="btn btn-line btn-sm"
|
|
aria-label="下一页"
|
|
>
|
|
下一页 <ChevronRight size={14} />
|
|
</button>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|