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
  ea2ea588_97d8_f5f0_6197_a2b017c07181["PaginationRtl()"]
  cb490df3_4e21_9c34_eac8_e1dee5541503["pagination-rtl.tsx"]
  ea2ea588_97d8_f5f0_6197_a2b017c07181 -->|defined in| cb490df3_4e21_9c34_eac8_e1dee5541503
  b5bb849e_6657_d972_2ae6_95e1623bd242["toArabicNumerals()"]
  ea2ea588_97d8_f5f0_6197_a2b017c07181 -->|calls| b5bb849e_6657_d972_2ae6_95e1623bd242
  style ea2ea588_97d8_f5f0_6197_a2b017c07181 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

apps/v4/examples/radix/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>
  )
}