ProgressRtl() — ui Function Reference

Architecture documentation for the ProgressRtl() function in progress-rtl.tsx from the ui codebase.

Function tsx DocumentationAtlas Changelog calls 1

Entity Profile

DocumentationAtlas→ Changelog→ ProgressRtl() — ui Function Reference

Dependency Diagram

graph TD
  540dd4c2_53b7_d4c9_ebfa_510ab9459398["ProgressRtl()"]
  21a31d62_27c1_c2a5_de83_88380cbc2f51["progress-rtl.tsx"]
  540dd4c2_53b7_d4c9_ebfa_510ab9459398 -->|defined in| 21a31d62_27c1_c2a5_de83_88380cbc2f51
  74c75675_5f16_66c6_2be8_07c64e1f7f2a["toArabicNumerals()"]
  540dd4c2_53b7_d4c9_ebfa_510ab9459398 -->|calls| 74c75675_5f16_66c6_2be8_07c64e1f7f2a
  style 540dd4c2_53b7_d4c9_ebfa_510ab9459398 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

apps/v4/examples/base/progress-rtl.tsx lines 45–67

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

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

  return (
    <Progress value={56} className="w-full max-w-sm" dir={dir}>
      <ProgressLabel>{t.label}</ProgressLabel>
      <ProgressValue>
        {(value) => (
          <span className="ms-auto">
            {formatNumber(parseFloat(value ?? "0"))}%
          </span>
        )}
      </ProgressValue>
    </Progress>
  )
}