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
  5a541710_9f55_e784_33d0_4b1b0cf5dded["ProgressRtl()"]
  e24baca3_f7bb_5664_f599_8dbf42981627["progress-rtl.tsx"]
  5a541710_9f55_e784_33d0_4b1b0cf5dded -->|defined in| e24baca3_f7bb_5664_f599_8dbf42981627
  f9c53ce3_2785_07fe_25c1_1947d13a2747["toArabicNumerals()"]
  5a541710_9f55_e784_33d0_4b1b0cf5dded -->|calls| f9c53ce3_2785_07fe_25c1_1947d13a2747
  style 5a541710_9f55_e784_33d0_4b1b0cf5dded fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

apps/v4/examples/radix/progress-rtl.tsx lines 42–61

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 (
    <Field className="w-full max-w-sm" dir={dir}>
      <FieldLabel htmlFor="progress-upload">
        <span>{t.label}</span>
        <span className="ms-auto">{formatNumber(66)}%</span>
      </FieldLabel>
      <Progress value={66} id="progress-upload" className="rtl:rotate-180" />
    </Field>
  )
}