Pagination

---
import Pagination from "../pagination.astro";
---

<div data-demo="pagination-default">
  <Pagination itemsTotal={120} itemsPerPage={10} />
  <p data-pagination-readout aria-live="polite" style="margin-top: 0.75rem;">
    On page 1
  </p>
</div>

<script>
  // The component is interactive out of the box (it self-syncs disabled state,
  // the summary, and the selects). It also emits `pindoba:change` so consumers
  // can react — here we reflect the current page into a readout.
  function boot() {
    const root = document.querySelector<HTMLElement>(
      '[data-demo="pagination-default"]',
    );
    if (!root) return;
    const readout = root.querySelector<HTMLElement>(
      "[data-pagination-readout]",
    );
    root.addEventListener("pindoba:change", (event) => {
      const detail = (event as CustomEvent).detail as {
        page: number;
        itemsPerPage: number;
      };
      if (readout) {
        readout.textContent = `On page ${detail.page + 1} (showing ${detail.itemsPerPage} per page)`;
      }
    });
  }

  boot();
  document.addEventListener("astro:page-load", boot);
</script>

import { useState } from "react";
import { Pagination } from "../Pagination";

export default function DefaultDemo() {
  const [page, setPage] = useState(0);
  const [itemsPerPage, setItemsPerPage] = useState(10);

  return (
    <Pagination
      itemsTotal={1000}
      itemsPerPage={itemsPerPage}
      page={page}
      onChangePage={(next) => setPage(next)}
      onChangeItemsPerPage={(next) => setItemsPerPage(next)}
    />
  );
}

<script lang="ts">
  import Pagination from "../pagination.svelte";

  let page = $state(0);
</script>

<Pagination itemsTotal={1000} itemsPerPage={10} bind:page />

import { useState } from "react";
import { Pagination } from "../Pagination";

export default function LabelsDemo() {
  const [page, setPage] = useState(0);
  const [itemsPerPage, setItemsPerPage] = useState(10);

  return (
    <Pagination
      itemsTotal={100}
      itemsPerPage={itemsPerPage}
      page={page}
      onChangePage={(next) => setPage(next)}
      onChangeItemsPerPage={(next) => setItemsPerPage(next)}
      labels={{
        first: { visuallyHidden: false },
        previous: { visuallyHidden: false },
        next: { visuallyHidden: false },
        last: { visuallyHidden: false },
      }}
    />
  );
}

<script lang="ts">
  import Pagination from "../pagination.svelte";

  let page = $state(0);
</script>

<Pagination
  itemsTotal={100}
  itemsPerPage={10}
  bind:page
  labels={{
    first: { visuallyHidden: false },
    previous: { visuallyHidden: false },
    next: { visuallyHidden: false },
    last: { visuallyHidden: false },
  }}
/>