87 lines
1.8 KiB
TypeScript
87 lines
1.8 KiB
TypeScript
"use client"
|
|
|
|
import * as React from "react"
|
|
|
|
import {
|
|
useTranslation,
|
|
type Translations,
|
|
} from "@/components/language-selector"
|
|
import {
|
|
Avatar,
|
|
AvatarBadge,
|
|
AvatarFallback,
|
|
AvatarGroup,
|
|
AvatarGroupCount,
|
|
AvatarImage,
|
|
} from "@/styles/aria-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>
|
|
)
|
|
}
|