From f0330825190506f101cf85633e754f59e5f1a7a9 Mon Sep 17 00:00:00 2001
From: SatooRu65536 <ryuto65536@gmail.com>
Date: Sun, 2 Feb 2025 15:38:34 +0900
Subject: [PATCH] =?UTF-8?q?add:=20Pagenation=20=E3=82=B3=E3=83=B3=E3=83=9D?=
 =?UTF-8?q?=E3=83=BC=E3=83=8D=E3=83=B3=E3=83=88=E3=82=92=E8=BF=BD=E5=8A=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Pagenation/index.astro | 96 +++++++++++++++++++++++++++
 1 file changed, 96 insertions(+)
 create mode 100644 src/components/Pagenation/index.astro

diff --git a/src/components/Pagenation/index.astro b/src/components/Pagenation/index.astro
new file mode 100644
index 0000000..00cdcd8
--- /dev/null
+++ b/src/components/Pagenation/index.astro
@@ -0,0 +1,96 @@
+---
+import { pipe } from 'remeda';
+
+interface Props {
+  page: number;
+  pageNum: number;
+  getPagePath: (n: number) => string;
+}
+const { page, pageNum, getPagePath } = Astro.props;
+
+const N = 2;
+
+const visiblePageNums = pipe(null, () => {
+  const min = page - N < 1 ? 1 : page - N;
+  const max = page + N > pageNum ? pageNum : page + N;
+  return Array.from({ length: max - min + 1 }, (_, i) => min + i);
+});
+---
+
+<div class="pagenation">
+  {visiblePageNums.at(0)! > 1 && <a href={getPagePath(1)}>1</a>}
+  {visiblePageNums.at(0)! > 2 && <span class="leader" />}
+
+  {
+    visiblePageNums.map((n) => (
+      <a href={getPagePath(n)} data-current={n === page}>
+        {n}
+      </a>
+    ))
+  }
+
+  {visiblePageNums.at(-1)! < pageNum - 1 && <span class="leader" />}
+  {visiblePageNums.at(-1)! < pageNum && <a href={getPagePath(pageNum)}>{pageNum}</a>}
+</div>
+
+<style lang="scss">
+  .pagenation {
+    margin: 40px auto 0 auto;
+    width: fit-content;
+    user-select: none;
+    display: flex;
+    align-items: center;
+    gap: 10px;
+
+    a {
+      width: 30px;
+      height: 30px;
+      display: inline-block;
+      border: solid 1px;
+      color: $primary-100;
+      border-color: $primary-100;
+      border-radius: 999px;
+      text-align: center;
+      line-height: 28px;
+      text-decoration: none;
+      cursor: pointer;
+      background-color: transparent;
+
+      &[data-current='true'] {
+        background-color: $primary-400;
+      }
+
+      &[data-hide='true'] {
+        visibility: hidden;
+        display: contents;
+      }
+    }
+
+    .leader {
+      margin-inline: 15px;
+      width: 4px;
+      height: 4px;
+      display: inline-block;
+      background-color: $primary-100;
+      position: relative;
+
+      &::before,
+      &::after {
+        content: '';
+        display: block;
+        width: 4px;
+        height: 4px;
+        background-color: $primary-100;
+        position: absolute;
+      }
+
+      &::before {
+        left: -10px;
+      }
+
+      &::after {
+        right: -10px;
+      }
+    }
+  }
+</style>