# Pagination

Previous, next and numbered pages for a long list, with gaps past the neighbours of the current page.

Source page: https://sproutboat.com/ikada/components/pagination

## Installation
```sh
npx shadcn@latest add https://sproutboat.com/ikada/r/pagination.json
```
Or from the package: `import { Pagination } from "@sproutboat/ikada";`
## Usage
```tsx
import { Pagination } from "@/components/ikada/pagination";

<Pagination page={page} onPageChange={setPage} pageCount={12} />
```
## Examples
### Numbered
The first and last page always show; pages past the current one's neighbours collapse into a gap.
```tsx
const [page, setPage] = useState(1);

<Pagination page={page} pageCount={12} onPageChange={setPage} />
```
### Compact
Previous, next and "Page 1 of 12". Use it on narrow screens.
```tsx
const [page, setPage] = useState(1);

<Pagination compact page={page} pageCount={12} onPageChange={setPage} />
```
### Siblings
Show more pages either side of the current one.
```tsx
const [page, setPage] = useState(1);

<Pagination siblings={2} page={page} pageCount={20} onPageChange={setPage} />
```
## Props
### PaginationProps
Also takes every prop of `Omit<ComponentProps<"nav">, "onChange">`.
| Prop | Type | Description |
| --- | --- | --- |
| page | `number` | Current page, starting at 1. |
| pageCount | `number` | Total number of pages. |
| onPageChange | `(page: number) => void` | Called with the page to go to. |
| compact? | `boolean` | Previous and next plus "Page 3 of 12", no number buttons. Use it on narrow screens. Default `false`. |
| siblings? | `number` | Pages shown either side of the current one. Default 1. |
Source: https://github.com/baronunread/ikada/blob/main/src/components/pagination.tsx