update

app/_components/Pagination.tsx

@@ -0,0 +1,54 @@
+import Link from "next/link";
+
+const Pagination = ({
+  page,
+  total,
+  perPage,
+}: {
+  page: number;
+  total: number;
+  perPage: number;
+}) => {
+  const pageCount = Math.ceil(total / perPage);
+  return (
+    <div
+      className={"mt-2.5 flex h-10 w-full items-center justify-center text-sm"}
+    >
+      {page <= 1 ? (
+        <div className={"prev mx-3 cursor-not-allowed text-gray-500"}>
+          上一页
+        </div>
+      ) : (
+        <Link className={"next mx-3 block"} href={`./${page - 1}`}>
+          上一页
+        </Link>
+      )}
+      {[...Array(pageCount)].map((el, index) =>
+        page === index + 1 ? (
+          <div key={index} className={`page-item mx-3 text-[#009fe9]`}>
+            {index + 1}
+          </div>
+        ) : (
+          <Link
+            className={"page-item mx-3 text-[#666666]"}
+            key={index}
+            href={`./${index + 1}`}
+          >
+            {index + 1}
+          </Link>
+        ),
+      )}
+      {page >= pageCount ? (
+        <div className={"next mx-3 cursor-not-allowed text-gray-500"}>
+          下一页
+        </div>
+      ) : (
+        <Link className={"next mx-3 block"} href={`./${page + 1}`}>
+          下一页
+        </Link>
+      )}
+    </div>
+  );
+};
+
+export default Pagination;