ItemRtl() — ui Function Reference

Architecture documentation for the ItemRtl() function in item-rtl.tsx from the ui codebase.

Function tsx DocumentationAtlas SearchAPI

Entity Profile

DocumentationAtlas→ SearchAPI→ ItemRtl() — ui Function Reference

Dependency Diagram

graph TD
  31d57b45_9d5d_78f0_7e42_d4b18e51138c["ItemRtl()"]
  510d12d0_95ea_690a_a239_c21358ae0337["item-rtl.tsx"]
  31d57b45_9d5d_78f0_7e42_d4b18e51138c -->|defined in| 510d12d0_95ea_690a_a239_c21358ae0337
  style 31d57b45_9d5d_78f0_7e42_d4b18e51138c fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

apps/v4/examples/base/item-rtl.tsx lines 50–79

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

  return (
    <div className="flex w-full max-w-md flex-col gap-6" dir={dir}>
      <Item variant="outline" dir={dir}>
        <ItemContent>
          <ItemTitle>{t.basicItem}</ItemTitle>
          <ItemDescription>{t.basicItemDesc}</ItemDescription>
        </ItemContent>
        <ItemActions>
          <Button variant="outline" size="sm">
            {t.action}
          </Button>
        </ItemActions>
      </Item>
      <Item variant="outline" size="sm" render={<a href="#" />} dir={dir}>
        <ItemMedia>
          <BadgeCheckIcon className="size-5" />
        </ItemMedia>
        <ItemContent>
          <ItemTitle>{t.verifiedTitle}</ItemTitle>
        </ItemContent>
        <ItemActions>
          <ChevronRightIcon className="size-4" />
        </ItemActions>
      </Item>
    </div>
  )
}