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
  13feabfc_4aa3_cda7_64db_04e15c9759f4["ItemRtl()"]
  41b68539_a4b5_3ee1_a8f7_8bd530196cd3["item-rtl.tsx"]
  13feabfc_4aa3_cda7_64db_04e15c9759f4 -->|defined in| 41b68539_a4b5_3ee1_a8f7_8bd530196cd3
  style 13feabfc_4aa3_cda7_64db_04e15c9759f4 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

apps/v4/examples/radix/item-rtl.tsx lines 50–81

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" asChild dir={dir}>
        <a href="#">
          <ItemMedia>
            <BadgeCheckIcon className="size-5" />
          </ItemMedia>
          <ItemContent>
            <ItemTitle>{t.verifiedTitle}</ItemTitle>
          </ItemContent>
          <ItemActions>
            <ChevronRightIcon className="size-4" />
          </ItemActions>
        </a>
      </Item>
    </div>
  )
}