PaginationRtl() — ui Function Reference

Architecture documentation for the PaginationRtl() function in pagination-rtl.tsx from the ui codebase.

Function tsx DocumentationAtlas ContentSourcing calls 1

Entity Profile

DocumentationAtlas→ ContentSourcing→ PaginationRtl() — ui Function Reference

Dependency Diagram

graph TD
  a64ea5bc_145c_2b7b_39e9_06f592cf406e["PaginationRtl()"]
  7a4e5033_749b_5887_fd4a_325a995cc298["pagination-rtl.tsx"]
  a64ea5bc_145c_2b7b_39e9_06f592cf406e -->|defined in| 7a4e5033_749b_5887_fd4a_325a995cc298
  5df0716c_487c_7de6_edcd_11acc8a5ac4e["toArabicNumerals()"]
  a64ea5bc_145c_2b7b_39e9_06f592cf406e -->|calls| 5df0716c_487c_7de6_edcd_11acc8a5ac4e
  style a64ea5bc_145c_2b7b_39e9_06f592cf406e fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

apps/v4/examples/base/pagination-rtl.tsx lines 52–88

export function PaginationRtl() {
  const { dir, t, language } = useTranslation(translations, "ar")

  const formatNumber = (num: number): string => {
    if (language === "ar") {
      return toArabicNumerals(num)
    }
    return num.toString()
  }

  return (
    <Pagination dir={dir}>
      <PaginationContent>
        <PaginationItem>
          <PaginationPrevious href="#" text={t.previous} />
        </PaginationItem>
        <PaginationItem>
          <PaginationLink href="#">{formatNumber(1)}</PaginationLink>
        </PaginationItem>
        <PaginationItem>
          <PaginationLink href="#" isActive>
            {formatNumber(2)}
          </PaginationLink>
        </PaginationItem>
        <PaginationItem>
          <PaginationLink href="#">{formatNumber(3)}</PaginationLink>
        </PaginationItem>
        <PaginationItem>
          <PaginationEllipsis />
        </PaginationItem>
        <PaginationItem>
          <PaginationNext href="#" text={t.next} />
        </PaginationItem>
      </PaginationContent>
    </Pagination>
  )
}