DocsPager() — supabase Function Reference

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

Function tsx DesignSystem ThemeEngine calls 1

Entity Profile

DesignSystem→ ThemeEngine→ DocsPager() — supabase Function Reference

Dependency Diagram

graph TD
  27db9859_d131_31d9_8bd1_3b94f5b0d771["DocsPager()"]
  90829d6e_59b6_b456_5c0b_4dea6bd53327["getPagerForDoc()"]
  27db9859_d131_31d9_8bd1_3b94f5b0d771 -->|calls| 90829d6e_59b6_b456_5c0b_4dea6bd53327
  style 27db9859_d131_31d9_8bd1_3b94f5b0d771 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

apps/design-system/components/pager.tsx lines 13–54

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

  if (!pager) {
    return null
  }

  const hasBoth = pager?.prev?.href && pager?.next?.href

  return (
    <div className={cn('flex flex-row items-center', hasBoth ? 'justify-between' : 'justify-end')}>
      {pager?.prev?.href && (
        <Link
          href={pager.prev.href}
          className="flex gap-3 text-foreground-light hover:text-foreground group"
        >
          <ChevronLeft className="mr-2 h-4 w-4 self-end mb-1 text-foreground-muted group-hover:text-foreground-lighter" />
          <div className="flex flex-col gap-1">
            <span className="text-xs font-mono uppercase tracking-wider text-foreground-muted group-hover:text-foreground-lighter">
              Previous
            </span>
            {pager.prev.title}
          </div>
        </Link>
      )}
      {pager?.next?.href && (
        <Link
          href={pager.next.href}
          className="flex gap-3 text-foreground-light hover:text-foreground group"
        >
          <div className="flex flex-col gap-1">
            <span className="text-xs font-mono uppercase tracking-wider text-foreground-muted group-hover:text-foreground-lighter">
              Next
            </span>
            {pager.next.title}
          </div>
          <ChevronRight className="ml-2 h-4 w-4 self-end mb-1 text-foreground-muted group-hover:text-foreground-lighter" />
        </Link>
      )}
    </div>
  )
}