ترقيم الصفحات

import { Pagination } from 'topclassui/pagination'

const blog = (page: number) => `/blog?page=${String(page)}`

/** Away from both ends: one sibling each side, one page at each end and a gap between. */
export default function Demo() {
  return <Pagination value={6} pageCount={12} getHref={blog} />
}

import { Pagination } from 'topclassui/pagination'

const blog = (page: number) => `/blog?page=${String(page)}`

/** On page 1 there is nowhere to go back to, so first and previous are spans, not links. */
export default function Demo() {
  return <Pagination value={1} pageCount={12} getHref={blog} />
}

import { Pagination } from 'topclassui/pagination'

const blog = (page: number) => `/blog?page=${String(page)}`

/** On the last page next and last are the spans; the row is still seven pages long. */
export default function Demo() {
  return <Pagination value={12} pageCount={12} getHref={blog} />
}

import { Pagination } from 'topclassui/pagination'

const blog = (page: number) => `/blog?page=${String(page)}`

/** Two navs on one page need a name each, so every one here passes its own aria-label. */
export default function Demo() {
  return (
    <div className="flex flex-col gap-4">
      <Pagination size="xs" value={3} pageCount={12} getHref={blog} aria-label="Extra small" />
      <Pagination size="sm" value={3} pageCount={12} getHref={blog} aria-label="Small" />
      <Pagination size="md" value={3} pageCount={12} getHref={blog} aria-label="Medium" />
      <Pagination size="lg" value={3} pageCount={12} getHref={blog} aria-label="Large" />
      <Pagination size="xl" value={3} pageCount={12} getHref={blog} aria-label="Extra large" />
    </div>
  )
}

import { Pagination } from 'topclassui/pagination'

const orders = (page: number) => `/orders?page=${String(page)}`

/** 500 pages are still eleven cells: two at each end, two each side of 250 and two gaps. */
export default function Demo() {
  return <Pagination value={250} pageCount={500} siblingCount={2} boundaryCount={2} getHref={orders} />
}

import { Pagination } from 'topclassui/pagination'

const orders = (page: number) => `/orders?page=${String(page)}`

/** Above and below one list: two navs on a page need a name each, so each passes aria-label. */
export default function Demo() {
  return (
    <div className="flex flex-col gap-4">
      <Pagination value={2} pageCount={8} getHref={orders} aria-label="Orders pages, top" />
      <p className="text-sm text-muted">Orders 26 to 50 of 200</p>
      <Pagination value={2} pageCount={8} getHref={orders} aria-label="Orders pages, bottom" />
    </div>
  )
}

import { Pagination } from 'topclassui/pagination'

const blog = (page: number) => `/blog?page=${String(page)}`

/** custom emits no size: a cell falls to the 24 px floor and takes the type size of the nav. */
export default function Demo() {
  return (
    <div className="flex flex-col gap-4">
      <Pagination value={3} pageCount={12} getHref={blog} aria-label="The scale" />
      <Pagination size="custom" className="text-xs" value={3} pageCount={12} getHref={blog} aria-label="Your own cells" />
    </div>
  )
}

import { Pagination } from 'topclassui/pagination'

const orders = (page: number) => `/orders?page=${String(page)}`

/** Page 12,345 of 123,456: a cell grows with its number, so no digit leaves the box. */
export default function Demo() {
  return (
    <div className="flex flex-col gap-4">
      <Pagination size="xs" value={12345} pageCount={123456} getHref={orders} aria-label="Extra small" />
      <Pagination size="sm" value={12345} pageCount={123456} getHref={orders} aria-label="Small" />
      <Pagination value={12345} pageCount={123456} getHref={orders} aria-label="Medium" />
    </div>
  )
}

import { ar } from 'topclassui/labels/ar'
import { Pagination } from 'topclassui/pagination'

const blog = (page: number) => `/blog?page=${String(page)}`

/** The row runs from the right and the four carets flip, with no class of its own for it. */
export default function Demo() {
  return (
    <div dir="rtl" lang="ar">
      <Pagination value={3} pageCount={12} getHref={blog} labels={ar} locale="ar" />
    </div>
  )
}