Pagination

import { useState } from 'react'
import { Pagination } from '@chassis-ui/react'

export const Example = () => {
  const [page, setPage] = useState(1)
  return <Pagination pages={10} activePage={page} onActivePageChange={setPage} aria-label="Demo" />
}

import { useState } from 'react'
import { Pagination } from '@chassis-ui/react'

export const Example = () => {
  const [page, setPage] = useState(5)
  return (
    <Pagination
      pages={20}
      activePage={page}
      onActivePageChange={setPage}
      maxVisiblePages={7}
      aria-label="Demo"
    />
  )
}

import { useState } from 'react'
import { Pagination } from '@chassis-ui/react'

export const Example = () => {
  const [page, setPage] = useState(1)
  // const [numbersPage, setNumbersPage] = useState(1)

  return (
    <div className="d-flex justify-content-between flex-wrap gap-md">
      <Pagination
        pages={5}
        activePage={page}
        onActivePageChange={setPage}
        showPrevNext={false}
        aria-label="Numbers only"
      />
      <Pagination
        pages={5}
        activePage={page}
        onActivePageChange={setPage}
        showPageNumbers={false}
        aria-label="Directions only"
      />
    </div>
  )
}

import { useState } from 'react'
import { Pagination, PaginationItem, usePagination } from '@chassis-ui/react'

// Smart mode always shows a contiguous range around the active page. Manual mode is for sets
// smart mode can't produce — like jumping between a fixed list of bookmarked pages. Prev/Next
// step through the array by index rather than by ±1, since the page numbers themselves aren't
// contiguous.
const bookmarkedPages = [1, 5, 12, 47]

export const Example = () => {
  const [index, setIndex] = useState(0)

  const prevDisabled = index <= 0
  const nextDisabled = index >= bookmarkedPages.length - 1
  const { prevRef, nextRef, handlePrevClick, handleNextClick } = usePagination({
    prevDisabled,
    nextDisabled,
    onPrev: () => setIndex((i) => i - 1),
    onNext: () => setIndex((i) => i + 1)
  })

  return (
    <Pagination aria-label="Bookmarked pages">
      <PaginationItem
        ref={prevRef}
        disabled={prevDisabled}
        onClick={handlePrevClick}
        aria-label="Previous"
      >
        &laquo;
      </PaginationItem>
      {bookmarkedPages.map((p, i) => (
        <PaginationItem key={p} active={i === index} onClick={() => setIndex(i)}>
          {p}
        </PaginationItem>
      ))}
      <PaginationItem
        ref={nextRef}
        disabled={nextDisabled}
        onClick={handleNextClick}
        aria-label="Next"
      >
        &raquo;
      </PaginationItem>
    </Pagination>
  )
}

import { Pagination, PaginationItem } from '@chassis-ui/react'

// Smart mode always renders buttons wired to `onActivePageChange`. Pass `href` directly to
// `PaginationItem` for real anchors instead — e.g. server-rendered pages where each link is a
// full page load to `?page=N`. (Hrefs point to `#` here so the docs page itself doesn't
// navigate; swap in your real page URLs.)
export const Example = () => {
  return (
    <Pagination aria-label="Page navigation example">
      <PaginationItem href="#" aria-label="Previous" disabled>
        &laquo;
      </PaginationItem>
      <PaginationItem href="#" active>
        1
      </PaginationItem>
      <PaginationItem href="#">2</PaginationItem>
      <PaginationItem href="#">3</PaginationItem>
      <PaginationItem href="#" aria-label="Next">
        &raquo;
      </PaginationItem>
    </Pagination>
  )
}

import { Pagination, PaginationItem } from '@chassis-ui/react'

// Freeze every item as `disabled` while the paginated data is fetching, so the paginator
// visibly reflects the loading state instead of accepting clicks that only queue up once the
// fetch resolves.
export const Example = () => {
  return (
    <Pagination aria-label="Page navigation example" aria-busy="true">
      <PaginationItem aria-label="Previous" disabled>
        &laquo;
      </PaginationItem>
      <PaginationItem active disabled>
        1
      </PaginationItem>
      <PaginationItem disabled>2</PaginationItem>
      <PaginationItem disabled>3</PaginationItem>
      <PaginationItem aria-label="Next" disabled>
        &raquo;
      </PaginationItem>
    </Pagination>
  )
}

import { useState } from 'react'
import { Pagination } from '@chassis-ui/react'

export const Example = () => {
  const [lgPage, setLargePage] = useState(2)
  const [smPage, setSmallPage] = useState(2)

  return (
    <>
      <Pagination
        size="lg"
        pages={3}
        activePage={lgPage}
        onActivePageChange={setLargePage}
        aria-label="Large pagination example"
      />
      <Pagination
        size="sm"
        pages={3}
        activePage={smPage}
        onActivePageChange={setSmallPage}
        aria-label="Small pagination example"
      />
    </>
  )
}

import { useState } from 'react'
import { Pagination } from '@chassis-ui/react'

export const Example = () => {
  const [centerPage, setCenterPage] = useState(2)
  const [endPage, setEndPage] = useState(2)

  return (
    <>
      <Pagination
        align="center"
        pages={3}
        activePage={centerPage}
        onActivePageChange={setCenterPage}
        aria-label="Centered pagination"
      />
      <Pagination
        align="end"
        pages={3}
        activePage={endPage}
        onActivePageChange={setEndPage}
        aria-label="Right-aligned pagination"
      />
    </>
  )
}