caszl-next/app/components/Pagination.tsx

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={"w-full flex justify-center mt-2.5 h-10 items-center text-sm"}
    >
      {page <= 1 ? (
        <div className={"prev mx-3 text-gray-500 cursor-not-allowed"}>
          上一页
        </div>
      ) : (
        <Link className={"next block mx-3"} 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 text-gray-500 cursor-not-allowed"}>
          下一页
        </div>
      ) : (
        <Link className={"next block mx-3"} href={`./${page + 1}`}>
          下一页
        </Link>
      )}
    </div>
  );
};

export default Pagination;