Pagination

import { Pagination } from '@/components/ui/pagination'
import { DemoRow, DemoStage } from './_kit'

export default function PaginationDemo() {
  return (
    <DemoStage>
      <DemoRow label="Middle of a long set" description="The visible window never changes width.">
        <Pagination
          currentPage={7}
          totalPages={24}
          buildHref={(page) => `/components?page=${page}`}
          className="w-full"
        />
      </DemoRow>

      <DemoRow label="First page">
        <Pagination
          currentPage={1}
          totalPages={5}
          buildHref={(page) => `/components?page=${page}`}
          className="w-full"
        />
      </DemoRow>

      <DemoRow label="Last page">
        <Pagination
          currentPage={5}
          totalPages={5}
          buildHref={(page) => `/components?page=${page}`}
          className="w-full"
        />
      </DemoRow>

      <p className="text-xs text-ink-muted">
        Links are real anchors, so pages remain crawlable and work without JavaScript.
      </p>
    </DemoStage>
  )
}

import Link from 'next/link'
import { ChevronLeft, ChevronRight } from 'lucide-react'
import { cn } from '@/lib/cn'

/**
 * Pagination
 *
 * Renders real anchors, so pages are crawlable, middle-clickable and work
 * without JavaScript. The window of visible page numbers is computed so the
 * control's width never depends on the total page count.
 */
export interface PaginationProps {
  currentPage: number
  totalPages: number
  /** Builds the href for a page number. */
  buildHref: (page: number) => string
  className?: string
  /** How many numbered links to show around the current page. */
  siblingCount?: number
  label?: string
}

function buildRange(current: number, total: number, siblings: number): Array<number | 'gap'> {
  const range: Array<number | 'gap'> = []
  const left = Math.max(2, current - siblings)
  const right = Math.min(total - 1, current + siblings)

  range.push(1)
  if (left > 2) range.push('gap')
  for (let page = left; page <= right; page += 1) range.push(page)
  if (right < total - 1) range.push('gap')
  if (total > 1) range.push(total)

  return range
}

export function Pagination({
  currentPage,
  totalPages,
  buildHref,
  className,
  siblingCount = 1,
  label = 'Pagination',
}: PaginationProps) {
  if (totalPages <= 1) return null

  const pages = buildRange(currentPage, totalPages, siblingCount)
  const hasPrevious = currentPage > 1
  const hasNext = currentPage < totalPages

  const itemClass =
    'inline-flex h-control min-w-[var(--density-control-height)] items-center justify-center rounded-md border px-2 text-sm font-medium transition-colors duration-150'

  return (
    <nav aria-label={label} className={cn('flex items-center justify-center gap-1', className)}>
      {hasPrevious ? (
        <Link
          href={buildHref(currentPage - 1)}
          rel="prev"
          className={cn(itemClass, 'border-line bg-surface text-ink hover:bg-surface-sunken')}
        >
          <ChevronLeft className="size-4" aria-hidden="true" />
          <span className="sr-only sm:not-sr-only sm:ml-1">Previous</span>
        </Link>
      ) : (
        <span
          aria-disabled="true"
          className={cn(itemClass, 'border-line-subtle text-ink-subtle opacity-60')}
        >
          <ChevronLeft className="size-4" aria-hidden="true" />
          <span className="sr-only sm:not-sr-only sm:ml-1">Previous</span>
        </span>
      )}

      <ol className="flex items-center gap-1">
        {pages.map((page, index) =>
          page === 'gap' ? (
            <li key={`gap-${index}`} aria-hidden="true" className="px-1 text-sm text-ink-subtle">
              …
            </li>
          ) : (
            <li key={page}>
              <Link
                href={buildHref(page)}
                aria-current={page === currentPage ? 'page' : undefined}
                className={cn(
                  itemClass,
                  page === currentPage
                    ? 'border-accent bg-accent text-accent-ink'
                    : 'border-line bg-surface text-ink hover:bg-surface-sunken',
                )}
              >
                {page}
                {page === currentPage ? <span className="sr-only">, current page</span> : null}
              </Link>
            </li>
          ),
        )}
      </ol>

      {hasNext ? (
        <Link
          href={buildHref(currentPage + 1)}
          rel="next"
          className={cn(itemClass, 'border-line bg-surface text-ink hover:bg-surface-sunken')}
        >
          <span className="sr-only sm:not-sr-only sm:mr-1">Next</span>
          <ChevronRight className="size-4" aria-hidden="true" />
        </Link>
      ) : (
        <span
          aria-disabled="true"
          className={cn(itemClass, 'border-line-subtle text-ink-subtle opacity-60')}
        >
          <span className="sr-only sm:not-sr-only sm:mr-1">Next</span>
          <ChevronRight className="size-4" aria-hidden="true" />
        </span>
      )}
    </nav>
  )
}