Pagination

npm install react-aria-components

"use client";

import { Button } from "react-aria-components";

const styles = {
  root: "flex items-center gap-(--tui-pagination-gap) font-(family-name:--tui-font) text-(length:--tui-pagination-font-size) leading-none",
  item: "inline-flex h-(--tui-pagination-size) min-w-(--tui-pagination-size) cursor-default items-center justify-center rounded-(--tui-pagination-radius) border-solid border-(length:--tui-pagination-border-width) border-(--tui-pagination-border) bg-transparent px-1 font-(family-name:--tui-font) font-(--tui-pagination-font-weight) text-(--tui-pagination-fg) tabular-nums outline-none transition-colors duration-(--tui-duration) aria-[current=page]:border-(--tui-pagination-current-bg) aria-[current=page]:bg-(--tui-pagination-current-bg)! aria-[current=page]:text-(--tui-pagination-current-fg) data-disabled:opacity-(--tui-pagination-disabled-opacity) data-focus-visible:[outline:var(--tui-pagination-ring-width)_solid_var(--tui-pagination-ring)] data-focus-visible:[outline-offset:var(--tui-pagination-ring-offset)] data-hovered:bg-(--tui-pagination-bg-hover)",
  gap: "inline-flex h-(--tui-pagination-size) min-w-(--tui-pagination-size) items-center justify-center text-(--tui-pagination-fg) select-none",
  icon: "size-4",
};

/** The pages to show: the first, the last, and those next to the current one. */
function pagesAround(page: number, total: number, siblings: number): (number | "gap")[] {
  const keep = new Set([1, total]);
  for (let p = page - siblings; p <= page + siblings; p++) if (p >= 1 && p <= total) keep.add(p);
  const sorted = [...keep].sort((a, b) => a - b);
  const out: (number | "gap")[] = [];
  sorted.forEach((p, i) => {
    const prev = sorted[i - 1];
    if (prev !== undefined && p - prev > 1) out.push(p - prev === 2 ? prev + 1 : "gap");
    out.push(p);
  });
  return out;
}

export interface PaginationProps {
  /** The current page, starting at 1. */
  page: number;
  /** How many pages there are. */
  total: number;
  onChange: (page: number) => void;
  /** Pages shown on each side of the current one. */
  siblings?: number;
  label?: string;
  className?: string;
}

export function Pagination({ page, total, onChange, siblings = 1, label = "Pagination", className }: PaginationProps) {
  return (
    <nav aria-label={label} className={[styles.root, className].filter(Boolean).join(" ")}>
      <Button aria-label="Previous page" isDisabled={page <= 1} onPress={() => onChange(page - 1)} data-slot="pagination-item" className={styles.item}>
        <svg aria-hidden viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round" className={styles.icon}>
          <path d="M10 4L6 8l4 4" />
        </svg>
      </Button>
      {pagesAround(page, total, siblings).map((p, i) =>
        p === "gap" ? (
          <span key={`gap-${i}`} aria-hidden className={styles.gap}>
            …
          </span>
        ) : (
          <Button key={p} aria-label={`Page ${p}`} aria-current={p === page ? "page" : undefined} onPress={() => onChange(p)} data-slot="pagination-item" className={styles.item}>
            {p}
          </Button>
        ),
      )}
      <Button aria-label="Next page" isDisabled={page >= total} onPress={() => onChange(page + 1)} data-slot="pagination-item" className={styles.item}>
        <svg aria-hidden viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round" className={styles.icon}>
          <path d="M6 4l4 4-4 4" />
        </svg>
      </Button>
    </nav>
  );
}

:root {
  color-scheme: light;
  --tui-bg: #ffffff;
  --tui-fg: #0a0a0a;
  --tui-muted: #f5f5f5;
  --tui-muted-fg: #737373;
  --tui-border: #e5e5e5;
  --tui-primary: #171717;
  --tui-primary-fg: #fafafa;
  --tui-ring: #a3a3a3;
  --tui-success: #16a34a;
  --tui-warning: #d97706;
  --tui-danger: #dc2626;
  --tui-radius: 8px;
  --tui-border-width: 1px;
  --tui-space: 4px;
  --tui-shadow: none;
  --tui-font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --tui-text: 14px;
  --tui-duration: 150ms;

  /* Pagination */
  --tui-pagination-size: calc(var(--tui-space) * 9);
  --tui-pagination-gap: calc(var(--tui-space) * 1);
  --tui-pagination-radius: var(--tui-radius);
  --tui-pagination-border-width: var(--tui-border-width);
  --tui-pagination-font-size: var(--tui-text);
  --tui-pagination-font-weight: 500;
  --tui-pagination-fg: var(--tui-fg);
  --tui-pagination-border: transparent;
  --tui-pagination-bg-hover: var(--tui-muted);
  --tui-pagination-current-bg: var(--tui-primary);
  --tui-pagination-current-fg: var(--tui-primary-fg);
  --tui-pagination-ring: var(--tui-ring);
  --tui-pagination-ring-width: 2px;
  --tui-pagination-ring-offset: 2px;
  --tui-pagination-disabled-opacity: 0.5;
}

.dark,
[data-theme="dark"] {
  color-scheme: dark;
  --tui-bg: #0a0a0a;
  --tui-fg: #fafafa;
  --tui-muted: #1c1c1c;
  --tui-muted-fg: #a3a3a3;
  --tui-border: #2a2a2a;
  --tui-primary: #fafafa;
  --tui-primary-fg: #171717;
  --tui-ring: #737373;
  --tui-success: #22c55e;
  --tui-warning: #f59e0b;
  --tui-danger: #ef4444;
}