shadcn-ui/apps/v4/examples/base/progress-rtl.tsx

"use client"

import * as React from "react"
import { Progress } from "@/examples/base/ui-rtl/progress"

import {
  useTranslation,
  type Translations,
} from "@/components/language-selector"

const translations: Translations = {
  en: {
    dir: "ltr",
    values: {},
  },
  ar: {
    dir: "rtl",
    values: {},
  },
  he: {
    dir: "rtl",
    values: {},
  },
}

export function ProgressRtl() {
  const { dir } = useTranslation(translations, "ar")
  const [progress, setProgress] = React.useState(13)

  React.useEffect(() => {
    const timer = setTimeout(() => setProgress(66), 500)
    return () => clearTimeout(timer)
  }, [])

  return <Progress value={progress} className="w-[60%]" dir={dir} />
}