Pagination

1"use client";
2 
3import type * as React from "react";
4import { cn } from "@/lib/utils";
5import { selectionFocus } from "@/lib/recipes";
6 
7import { CaretLeft, CaretRight } from "@phosphor-icons/react/dist/ssr";
8export interface PaginationProps {
9  /** Current page (1-indexed). */
10  page: number;
11  totalPages: number;
12  /** When provided, each control renders as a real `<a href>` for SEO-friendly navigation. */
13  href?: (page: number) => string;
14  /** Client-side handler. Rendered as `<button>` when `href` is not given. */
15  onPageChange?: (page: number) => void;
16  /** Number of page-number siblings on each side of the current page. Default 1. */
17  siblingCount?: number;
18  /** Show only previous, current-page summary, and next controls. */
19  compact?: boolean;
20  /** Localized compact summary. Defaults to `Page {page} of {totalPages}`. */
21  pageSummary?: React.ReactNode;
22  loading?: boolean;
23  className?: string;
24}
25 
26/** Loose row of page chips flanked by prev/next arrows. Renders nothing when totalPages <= 1. */
27export function Pagination({
28  page,
29  totalPages,
30  href,
31  onPageChange,
32  siblingCount = 1,
33  compact = false,
34  pageSummary,
35  loading = false,
36  className,
37}: PaginationProps): React.ReactElement | null {
38  if (totalPages <= 1) return null;
39 
40  const atFirst = page === 1;
41  const atLast = page === totalPages;
42  const items = getPageItems(page, totalPages, siblingCount);
43 
44  return (
45    <nav
46      data-slot="pagination"
47      aria-label="Pagination"
48      aria-busy={loading || undefined}
49      className={cn("inline-flex items-center gap-0.5", className)}
50    >
51      <PageCell
52        page={page - 1}
53        disabled={atFirst || loading}
54        href={href}
55        onPageChange={onPageChange}
56        ariaLabel="Previous page"
57        icon={<CaretLeft className="size-3.5 rtl:rotate-180" />}
58      />
59      {compact ? (
60        <span
61          data-slot="pagination-summary"
62          aria-current="page"
63          className="inline-flex h-8 min-w-0 items-center justify-center px-3 text-small font-medium tabular-nums text-ink"
64        >
65          {pageSummary ?? `Page ${page} of ${totalPages}`}
66        </span>
67      ) : (
68        items.map((item, i) => {
69          if (item === "ellipsis") {
70            return (
71              <span
72                key={`ellipsis-${i}`}
73                aria-hidden
74                className="inline-flex size-8 shrink-0 items-center justify-center text-ink-tertiary tabular-nums"
75                data-slot="pagination-ellipsis"
76// … truncated