AvatarRtl() — ui Function Reference

Architecture documentation for the AvatarRtl() function in avatar-rtl.tsx from the ui codebase.

Function tsx DocumentationAtlas Changelog

Entity Profile

DocumentationAtlas→ Changelog→ AvatarRtl() — ui Function Reference

Dependency Diagram

graph TD
  563ecacf_27d4_d0ab_38e0_bd81742d37d6["AvatarRtl()"]
  7cbd680e_2ac8_97ab_2261_36ab8a70d331["avatar-rtl.tsx"]
  563ecacf_27d4_d0ab_38e0_bd81742d37d6 -->|defined in| 7cbd680e_2ac8_97ab_2261_36ab8a70d331
  style 563ecacf_27d4_d0ab_38e0_bd81742d37d6 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

apps/v4/examples/base/avatar-rtl.tsx lines 39–86

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

  return (
    <div
      className="flex flex-row flex-wrap items-center gap-6 md:gap-12"
      dir={dir}
    >
      <Avatar>
        <AvatarImage
          src="https://github.com/shadcn.png"
          alt="@shadcn"
          className="grayscale"
        />
        <AvatarFallback>CN</AvatarFallback>
      </Avatar>
      <Avatar>
        <AvatarImage
          src="https://github.com/evilrabbit.png"
          alt="@evilrabbit"
        />
        <AvatarFallback>ER</AvatarFallback>
        <AvatarBadge className="bg-green-600 dark:bg-green-800" />
      </Avatar>
      <AvatarGroup className="grayscale">
        <Avatar>
          <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
          <AvatarFallback>CN</AvatarFallback>
        </Avatar>
        <Avatar>
          <AvatarImage
            src="https://github.com/maxleiter.png"
            alt="@maxleiter"
          />
          <AvatarFallback>LR</AvatarFallback>
        </Avatar>
        <Avatar>
          <AvatarImage
            src="https://github.com/evilrabbit.png"
            alt="@evilrabbit"
          />
          <AvatarFallback>ER</AvatarFallback>
        </Avatar>
        <AvatarGroupCount>{t.moreUsers}</AvatarGroupCount>
      </AvatarGroup>
    </div>
  )
}