vhosts/blog/nuldoc-src/components/Pagination.tsx


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45

type Props = {
  currentPage: number;
  totalPages: number;
  basePath: string;
};

export default function Pagination(
  { currentPage, totalPages, basePath }: Props,
) {
  if (totalPages <= 1) {
    return <div></div>;
  }

  const prevPage = currentPage > 1 ? currentPage - 1 : null;
  const nextPage = currentPage < totalPages ? currentPage + 1 : null;

  const prevHref = prevPage === 1 ? basePath : `${basePath}${prevPage}/`;
  const nextHref = `${basePath}${nextPage}/`;

  return (
    <nav className="pagination">
      <div className="pagination-prev">
        {prevPage
          ? (
            <a href={prevHref}>
              前のページ
            </a>
          )
          : null}
      </div>
      <div className="pagination-info">
        {String(currentPage)} / {String(totalPages)}
      </div>
      <div className="pagination-next">
        {nextPage
          ? (
            <a href={nextHref}>
              次のページ
            </a>
          )
          : null}
      </div>
    </nav>
  );
}