ItemDemo() — ui Function Reference

Architecture documentation for the ItemDemo() function in item-demo.tsx from the ui codebase.

Function tsx Internationalization Dictionary

Entity Profile

Internationalization→ Dictionary→ ItemDemo() — ui Function Reference

Dependency Diagram

graph TD
  15f61791_7d0e_0d9b_bead_66477f8ef6ed["ItemDemo()"]
  2d34c4a4_4706_8226_f853_4d56a22d8ac0["item-demo.tsx"]
  15f61791_7d0e_0d9b_bead_66477f8ef6ed -->|defined in| 2d34c4a4_4706_8226_f853_4d56a22d8ac0
  style 15f61791_7d0e_0d9b_bead_66477f8ef6ed fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

apps/v4/app/(app)/examples/rtl/components/item-demo.tsx lines 33–64

export function ItemDemo() {
  const context = useLanguageContext()
  const lang = context?.language === "he" ? "he" : "ar"
  const t = translations[lang]

  return (
    <div dir={t.dir} className="flex w-full max-w-md flex-col gap-6">
      <Item variant="outline">
        <ItemContent>
          <ItemTitle>{t.twoFactor}</ItemTitle>
          <ItemDescription className="text-pretty xl:hidden 2xl:block">
            {t.twoFactorDescription}
          </ItemDescription>
        </ItemContent>
        <ItemActions>
          <Button size="sm">{t.enable}</Button>
        </ItemActions>
      </Item>
      <Item variant="outline" size="sm">
        <ItemMedia>
          <BadgeCheckIcon className="size-5" />
        </ItemMedia>
        <ItemContent>
          <ItemTitle>{t.verified}</ItemTitle>
        </ItemContent>
        <ItemActions>
          <ChevronRightIcon className="size-4 rtl:rotate-180" />
        </ItemActions>
      </Item>
    </div>
  )
}