sync

apps/web/src/pages/waterbodies/index.astro

@@ -3,9 +3,18 @@ import Layout from "../../layouts/Layout.astro";
 import PageHero from "../../components/PageHero.astro";
 import StatePanel from "../../components/StatePanel.astro";
 import WaterbodyMark from "../../components/WaterbodyMark.astro";
+import Pagination from "../../components/Pagination.astro";
 import { api, type DictionaryItem } from "../../lib/api";
-let waters: DictionaryItem[] = [], unavailable = false;
-try { waters = await api<DictionaryItem[]>("/api/v1/waterbodies?limit=500"); } catch { unavailable = true; }
+const params = Astro.url.searchParams;
+const pageLimit = 48;
+const requestedOffset = Number(params.get("offset") ?? 0);
+let offset = Number.isInteger(requestedOffset) && requestedOffset >= 0 ? requestedOffset : 0;
+let waters: DictionaryItem[] = [], allWaters: DictionaryItem[] = [], unavailable = false;
+try {
+  allWaters = await api<DictionaryItem[]>("/api/v1/waterbodies?limit=500");
+  if (allWaters.length > 0 && offset >= allWaters.length) offset = Math.floor((allWaters.length - 1) / pageLimit) * pageLimit;
+  waters = allWaters.slice(offset, offset + pageLimit);
+} catch { unavailable = true; }
 if (unavailable) {
   Astro.response.status = 503;
   Astro.response.headers.set("Retry-After", "60");
@@ -13,6 +22,7 @@ if (unavailable) {
 }
 ---
 <Layout title="Все водоёмы Russian Fishing 4 — RF4 Spotter" description="Каталог водоёмов RF4 со свежими точками, рыбами, приманками и прозрачными источниками данных.">
-  <PageHero eyebrow="Карта водоёмов RF4" title="Водоёмы" description="Откройте водоём, чтобы увидеть активные виды рыб и последние подтверждённые точки." variant="water" count={waters.length} />
-  {unavailable ? <StatePanel tone="unavailable" title="Каталог временно недоступен" description="Не показываем непроверенный список. Попробуйте обновить страницу позже." /> : <nav class="catalog-grid catalog-grid--waters content-grid" aria-label="Водоёмы">{waters.map((water,index) => <a href={`/waterbodies/${water.slug}`}><span>Водоём · {String(index + 1).padStart(2,"0")}</span><strong>{water.name_ru}</strong><i>Открыть <b>→</b></i><WaterbodyMark identity={water.slug}/></a>)}</nav>}
+  <PageHero eyebrow="Карта водоёмов RF4" title="Водоёмы" description="Откройте водоём, чтобы увидеть активные виды рыб и последние подтверждённые точки." variant="water" count={allWaters.length} />
+  {unavailable ? <StatePanel tone="unavailable" title="Каталог временно недоступен" description="Не показываем непроверенный список. Попробуйте обновить страницу позже." /> : <nav class="catalog-grid catalog-grid--waters content-grid" aria-label="Водоёмы">{waters.map((water,index) => <a href={`/waterbodies/${water.slug}`}><span>Водоём · {String(offset + index + 1).padStart(2,"0")}</span><strong>{water.name_ru}</strong><i>Открыть <b>→</b></i><WaterbodyMark identity={water.slug}/></a>)}</nav>}
+  {!unavailable && <Pagination path="/waterbodies" params={params} total={allWaters.length} limit={pageLimit} offset={offset} itemLabel="водоёмов" />}
 </Layout>