snapshot of https://github.com/shadcn-ui/ui.git (main, 2026-09-15; blobs > 131072B omitted)

apps/v4/examples/radix/avatar-rtl.tsx

@@ -0,0 +1,86 @@
+"use client"
+
+import * as React from "react"
+
+import {
+  useTranslation,
+  type Translations,
+} from "@/components/language-selector"
+import {
+  Avatar,
+  AvatarBadge,
+  AvatarFallback,
+  AvatarGroup,
+  AvatarGroupCount,
+  AvatarImage,
+} from "@/styles/radix-nova/ui-rtl/avatar"
+
+const translations: Translations = {
+  en: {
+    dir: "ltr",
+    values: {
+      moreUsers: "+3",
+    },
+  },
+  ar: {
+    dir: "rtl",
+    values: {
+      moreUsers: "+٣",
+    },
+  },
+  he: {
+    dir: "rtl",
+    values: {
+      moreUsers: "+3",
+    },
+  },
+}
+
+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>
+  )
+}