# Pagination

> Navigation pages cho danh sách dài — auto-generate dãy số với ellipsis, prev/next buttons. Tabular numbers cho alignment.

## API

| Prop | Type | Default | Description |
|---|---|---|---|
| `currentPage` | `number` | required | Page hiện tại (1-indexed) |
| `totalPages` | `number` | required | Tổng số page |
| `onPageChange` | `(page: number) => void` | required | Callback khi click page |
| `siblingCount` | `number` | `1` | Số page hiển thị 2 bên page hiện tại |
| `className` | `string` | — | Override container |

## Variants

Không có variant — luôn dùng layout `prev [1 … 4 5 6 … 20] next`.

## States

- **First page**: prev disabled (opacity-40 + cursor-not-allowed)
- **Last page**: next disabled
- **Single page** (`totalPages = 1`): hiển thị duy nhất 1 button "1"
- **No pages** (`totalPages ≤ 0`): component return `null`
- **Current page**: bg-primary + text-primary-on (highlight)

## Usage

```tsx
import { Pagination } from '@cowork/ui';

const [page, setPage] = useState(1);

<Pagination
  currentPage={page}
  totalPages={42}
  onPageChange={setPage}
  siblingCount={1}
/>
```

## Real-world example

- An Nhien admin: pagination dưới bảng đơn hàng (50 đơn/page) — dùng kèm DataTable.
- KHI member list: pagination dưới grid card thành viên — 12 card/page với filter trên.
- A-Kryphan blog: pagination dưới list bài viết, 10 bài/page.

## Accessibility

- `<nav aria-label="Pagination">` container
- Prev/next button có `aria-label="Previous page"` / `"Next page"`
- Current page có `aria-current="page"`
- Ellipsis `<span aria-hidden="true">…</span>` — screen reader skip
- Disabled buttons có `disabled` attr, không phải chỉ opacity

## Responsive behavior

`flex items-center gap-1.5` — single row mọi screen. Trên mobile rất hẹp (<360px) có thể overflow horizontal nếu totalPages lớn — caller nên ẩn pagination giữa khi mobile (vd chỉ hiện prev/next + "X / Y").

## Related

- [[DataTable]] — DataTable có pagination built-in riêng (đơn giản hơn, chỉ Prev/Next + "X / Y"). Dùng Pagination component này cho list non-table.
- [[SearchBar]] — kết hợp filter list trước khi paginate

## Source

`react/src/molecules/Pagination.tsx`