DocsPager() — ui Function Reference

Architecture documentation for the DocsPager() function in pager.tsx from the ui codebase.

Function tsx ComponentRegistry UIPrimitives calls 1

Entity Profile

ComponentRegistry→ UIPrimitives→ DocsPager() — ui Function Reference

Dependency Diagram

graph TD
  9429d3ec_8df8_0c96_68db_eaa7bf76b5a6["DocsPager()"]
  213561a5_18fd_dd2d_4a77_5d95a3395c34["pager.tsx"]
  9429d3ec_8df8_0c96_68db_eaa7bf76b5a6 -->|defined in| 213561a5_18fd_dd2d_4a77_5d95a3395c34
  001e0f6b_7835_dbc1_a974_705554ac3489["getPagerForDoc()"]
  9429d3ec_8df8_0c96_68db_eaa7bf76b5a6 -->|calls| 001e0f6b_7835_dbc1_a974_705554ac3489
  style 9429d3ec_8df8_0c96_68db_eaa7bf76b5a6 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

deprecated/www/components/pager.tsx lines 13–40

export function DocsPager({ doc }: DocsPagerProps) {
  const pager = getPagerForDoc(doc)

  if (!pager) {
    return null
  }

  return (
    <div className="flex flex-row items-center justify-between">
      {pager?.prev?.href && (
        <Button variant="ghost" asChild>
          <Link href={pager.prev.href}>
            <ChevronLeft />
            {pager.prev.title}
          </Link>
        </Button>
      )}
      {pager?.next?.href && (
        <Button variant="ghost" className="ml-auto" asChild>
          <Link href={pager.next.href}>
            {pager.next.title}
            <ChevronRight />
          </Link>
        </Button>
      )}
    </div>
  )
}