1 files changed, 93 insertions, 0 deletions
diff --git a/src/components/SanpiPagination.astro b/src/components/SanpiPagination.astro
new file mode 100644
index 0000000..294ad76
--- /dev/null
+++ b/src/components/SanpiPagination.astro
@@ -0,0 +1,93 @@
+---
+// 年度別の賛否一覧ページの末尾に、前年度・次年度へのリンクを
+// Starlight のページネーションと同じ見た目で表示する。
+// 年度別ページはサイドバーに登録していないため、Starlight 標準の
+// Pagination では前後関係が決まらない。ここで明示的にリンクを渡す。
+import { Icon } from "@astrojs/starlight/components";
+
+interface Link {
+  href: string;
+  label: string;
+}
+
+interface Props {
+  prev?: Link;
+  next?: Link;
+}
+
+const { prev, next } = Astro.props;
+---
+
+{
+  (prev || next) && (
+    <div class="pagination-links print:hidden" dir="ltr">
+      {prev && (
+        <a href={prev.href} rel="prev">
+          <Icon name="left-arrow" size="1.5rem" />
+          <span>
+            {Astro.locals.t("page.previousLink")}
+            <br />
+            <span class="link-title">{prev.label}</span>
+          </span>
+        </a>
+      )}
+      {next && (
+        <a href={next.href} rel="next">
+          <Icon name="right-arrow" size="1.5rem" />
+          <span>
+            {Astro.locals.t("page.nextLink")}
+            <br />
+            <span class="link-title">{next.label}</span>
+          </span>
+        </a>
+      )}
+    </div>
+  )
+}
+
+<style>
+  @layer starlight.core {
+    .pagination-links {
+      display: grid;
+      grid-template-columns: repeat(auto-fit, minmax(min(18rem, 100%), 1fr));
+      gap: 1rem;
+    }
+
+    a {
+      display: flex;
+      align-items: center;
+      justify-content: flex-start;
+      gap: 0.5rem;
+      width: 100%;
+      flex-basis: calc(50% - 0.5rem);
+      flex-grow: 1;
+      border: 1px solid var(--sl-color-gray-5);
+      border-radius: 0.5rem;
+      padding: 1rem;
+      text-decoration: none;
+      color: var(--sl-color-gray-2);
+      box-shadow: var(--sl-shadow-md);
+      overflow-wrap: anywhere;
+    }
+
+    [rel="next"] {
+      justify-content: end;
+      text-align: end;
+      flex-direction: row-reverse;
+    }
+
+    a:hover {
+      border-color: var(--sl-color-gray-2);
+    }
+
+    .link-title {
+      color: var(--sl-color-white);
+      font-size: var(--sl-text-2xl);
+      line-height: var(--sl-line-height-headings);
+    }
+
+    svg {
+      flex-shrink: 0;
+    }
+  }
+</style>