記事をタグで絞り込んだページもページング対応した

1 files changed, 100 insertions, 0 deletions

diff --git a/src/app/article/_components/pagenationElement.tsx b/src/app/article/_components/pagenationElement.tsx
new file mode 100644
index 0000000..79191bc
--- /dev/null
+++ b/src/app/article/_components/pagenationElement.tsx
@@ -0,0 +1,100 @@
+import Link from "next/link";
+import { createPagenation } from "../../../util/pagenation";
+
+export function pagenationElement(now: number, max: number, getHrefBuilder: (page: number) => string) {
+  const pagenationData = createPagenation({ now: now, max: max, between: 2 });
+  const liElements: JSX.Element[] = [];
+  for (const v of pagenationData) {
+    if (v.type == "back") {
+      if (v.link == null) {
+        liElements.push(
+          <li key={v.key}>
+            <span className="flex items-center justify-center px-4 h-10 ms-0 leading-tight text-gray-500 bg-white border border-e-0 border-gray-300 rounded-s-lg hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white">
+              <span className="sr-only">Previous</span>
+              <svg className="w-3 h-3 rtl:rotate-180" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 6 10">
+                <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 1 1 5l4 4" />
+              </svg>
+            </span>
+          </li>
+        );
+      } else {
+        liElements.push(
+          <li key={v.key}>
+            <Link href={getHrefBuilder(v.link)} className="flex items-center justify-center px-4 h-10 ms-0 leading-tight text-gray-500 bg-white border border-e-0 border-gray-300 rounded-s-lg hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white">
+              <span className="sr-only">Previous</span>
+              <svg className="w-3 h-3 rtl:rotate-180" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 6 10">
+                <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 1 1 5l4 4" />
+              </svg>
+            </Link>
+          </li>
+        );
+      }
+    } else if (v.type == "next") {
+      if (v.link == null) {
+        liElements.push(
+          <li key={v.key}>
+            <span className="flex items-center justify-center px-4 h-10 leading-tight text-gray-500 bg-white border border-gray-300 rounded-e-lg hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white">
+              <span className="sr-only">Next</span>
+              <svg className="w-3 h-3 rtl:rotate-180" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 6 10">
+                <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 9 4-4-4-4" />
+              </svg>
+            </span>
+          </li>
+        );
+      } else {
+        liElements.push(
+          <li key={v.key}>
+            <Link href={getHrefBuilder(v.link)} className="flex items-center justify-center px-4 h-10 leading-tight text-gray-500 bg-white border border-gray-300 rounded-e-lg hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white">
+              <span className="sr-only">Next</span>
+              <svg className="w-3 h-3 rtl:rotate-180" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 6 10">
+                <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 9 4-4-4-4" />
+              </svg>
+            </Link>
+          </li>
+        );
+      }
+    } else if (v.type == "num") {
+      if (v.link == null) {
+        if (v.num == now) {
+          liElements.push(
+            <li key={v.key}>
+              <span
+                className="z-10 flex items-center justify-center px-4 h-10 leading-tight text-blue-600 border border-blue-300 bg-blue-50 hover:bg-blue-100 hover:text-blue-700 dark:border-gray-700 dark:bg-gray-700 dark:text-white"
+              >{v.num}</span>
+            </li>
+          );
+        } else {
+          liElements.push(
+            <li key={v.key}>
+              <span
+                className="flex items-center justify-center px-4 h-10 leading-tight text-gray-500 bg-white border border-gray-300 hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white"
+              >{v.num}</span>
+            </li>
+          );
+        }
+      } else {
+        liElements.push(
+          <li key={v.key}>
+            <Link
+              href={getHrefBuilder(v.link)}
+              className="flex items-center justify-center px-4 h-10 leading-tight text-gray-500 bg-white border border-gray-300 hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white"
+            >{v.num}</Link>
+          </li>
+        );
+      }
+    } else if (v.type == "sp") {
+      <li key={v.key}>
+        <span
+          className="flex items-center justify-center px-4 h-10 leading-tight text-gray-500 bg-white border border-gray-300 hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white"
+        >...</span>
+      </li>
+    }
+  }
+  return (
+    <nav className="flex justify-center pt-10">
+      <ul className="flex items-center -space-x-px h-10 text-base">
+        {liElements}
+      </ul>
+    </nav>
+  );
+}