feat(blog/style): change page navigation style

1 files changed, 50 insertions, 8 deletions

diff --git a/services/blog/nuldoc-src/components/Pagination.tsx b/services/blog/nuldoc-src/components/Pagination.tsx
index 5527c924..ab13e361 100644
--- a/services/blog/nuldoc-src/components/Pagination.tsx
+++ b/services/blog/nuldoc-src/components/Pagination.tsx
@@ -11,31 +11,69 @@ export default function Pagination(
     return <div></div>;
   }
 
+  const firstPage = 1;
+  const lastPage = totalPages;
   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}/`;
+  const firstHref = pageUrlAt(basePath, firstPage);
+  const lastHref = pageUrlAt(basePath, lastPage);
+  const prevHref = prevPage ? pageUrlAt(basePath, prevPage) : null;
+  const nextHref = nextPage ? pageUrlAt(basePath, nextPage) : null;
 
   return (
     <nav className="pagination">
       <div className="pagination-prev">
-        {prevPage
+        {prevHref
           ? (
             <a href={prevHref}>
-              前のページ
+              前へ
             </a>
           )
           : null}
       </div>
-      <div className="pagination-info">
-        {String(currentPage)} / {String(totalPages)}
+      <div
+        className={"pagination-page" +
+          (firstPage === currentPage ? " pagination-page-current" : "")}
+      >
+        {firstPage === currentPage
+          ? String(firstPage)
+          : <a href={firstHref}>{String(firstPage)}</a>}
+      </div>
+      {currentPage - firstPage > 1
+        ? (
+          <div className="pagination-elipsis">
+            …
+          </div>
+        )
+        : null}
+      {currentPage !== firstPage && currentPage !== lastPage
+        ? (
+          <div className="pagination-page pagination-page-current">
+            {String(currentPage)}
+          </div>
+        )
+        : null}
+      {lastPage - currentPage > 1
+        ? (
+          <div className="pagination-elipsis">
+            …
+          </div>
+        )
+        : null}
+      <div
+        className={"pagination-page" +
+          (lastPage === currentPage ? " pagination-page-current" : "")}
+      >
+        {lastPage === currentPage
+          ? String(lastPage)
+          : <a href={lastHref}>{String(lastPage)}</a>}
       </div>
       <div className="pagination-next">
-        {nextPage
+        {nextHref
           ? (
             <a href={nextHref}>
-              次のページ
+              次へ
             </a>
           )
           : null}
@@ -43,3 +81,7 @@ export default function Pagination(
     </nav>
   );
 }
+
+function pageUrlAt(basePath: string, page: number): string {
+  return page === 1 ? basePath : `${basePath}${page}/`;
+}