Initial 智念AIGC platform

components/pagination.tsx

@@ -0,0 +1,45 @@
+"use client";
+
+import { ChevronLeft, ChevronRight } from "lucide-react";
+
+export function Pagination({
+  page,
+  pageSize,
+  total,
+  label = "分页",
+  onPageChange
+}: {
+  page: number;
+  pageSize: number;
+  total: number;
+  label?: string;
+  onPageChange: (page: number) => void;
+}) {
+  const totalPages = pageCount(total, pageSize);
+  if (totalPages <= 1) return null;
+  const current = clampPage(page, total, pageSize);
+  return (
+    <nav className="pagination" aria-label={label}>
+      <button className="icon-button" type="button" title="上一页" disabled={current <= 1} onClick={() => onPageChange(current - 1)}>
+        <ChevronLeft size={17} />
+      </button>
+      <span className="pager-meta">{current} / {totalPages}</span>
+      <button className="icon-button" type="button" title="下一页" disabled={current >= totalPages} onClick={() => onPageChange(current + 1)}>
+        <ChevronRight size={17} />
+      </button>
+    </nav>
+  );
+}
+
+export function clampPage(page: number, total: number, pageSize: number) {
+  return Math.min(Math.max(1, page), pageCount(total, pageSize));
+}
+
+export function pageItems<T>(items: T[], page: number, pageSize: number) {
+  const current = clampPage(page, items.length, pageSize);
+  return items.slice((current - 1) * pageSize, current * pageSize);
+}
+
+function pageCount(total: number, pageSize: number) {
+  return Math.max(1, Math.ceil(total / pageSize));
+}