sync

apps/web/src/components/Pagination.astro

@@ -0,0 +1,27 @@
+---
+import { pageHref, pageWindow } from "../lib/pagination";
+
+interface Props {
+  path: string;
+  params: URLSearchParams;
+  total: number;
+  limit: number;
+  offset: number;
+  anchor?: string;
+  itemLabel?: string;
+}
+
+const { path, params, total, limit, offset, anchor = "", itemLabel = "записей" } = Astro.props;
+const state = pageWindow(total, limit, offset);
+---
+{total > limit && <nav class="pagination" aria-label="Пагинация">
+  <span>{state.start}–{state.end} из {total} {itemLabel} · страница {state.page} из {state.pages}</span>
+  <div>
+    {state.previousOffset !== null
+      ? <a data-action="secondary" rel="prev" href={pageHref(path, params, state.previousOffset, anchor)}>← Предыдущая</a>
+      : <span class="pagination__disabled" aria-disabled="true">← Предыдущая</span>}
+    {state.nextOffset !== null
+      ? <a data-action="secondary" rel="next" href={pageHref(path, params, state.nextOffset, anchor)}>Следующая →</a>
+      : <span class="pagination__disabled" aria-disabled="true">Следующая →</span>}
+  </div>
+</nav>}