You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
vibed/quotesdb/.beans/quotesdb-6huz--implement-pa...

44 lines
1.3 KiB
Markdown

---
# quotesdb-6huz
title: Implement pagination component — prev/next buttons, current page indicator, total pages
status: completed
type: task
priority: normal
created_at: 2026-03-10T23:32:06Z
updated_at: 2026-03-10T23:32:13Z
blocked_by:
- quotesdb-kaat
- quotesdb-wlpv
---
<context>
The `quotesdb` UI is a Yew (Rust → Wasm) single-page app compiled by Trunk and hosted on Cloudflare Pages. It communicates with the backend API via `fetch` calls. Source lives in `src/bin/ui/`. Run with `trunk serve` for local development.
</context>
<goal>
Implement a shared `Pagination` Yew component (`src/bin/ui/components/pagination.rs`) that renders:
- A "Previous" button (disabled on page 1)
- Current page indicator (e.g. "Page 2 of 5")
- A "Next" button (disabled on the last page)
The component accepts `page`, `total_pages`, and an `on_page_change: Callback<u32>` prop.
</goal>
<constraints>
- Resolve TRIAGE ticket 5e3e37 (CSS/styling approach) before adding class names.
- Do not navigate programmatically — call `on_page_change` and let the parent update the URL or state.
- Render nothing (or a disabled shell) if `total_pages <= 1`.
</constraints>
<validation>
From the `quotesdb/` directory:
```sh
trunk build
```
</validation>
<commit>
`feat(quotesdb): implement shared Pagination component`
</commit>