avatar-group-rtl-demo

1import {
2  Avatar,
3  AvatarFallback,
4  AvatarImage,
5} from "@/registry/bases/base/ui/avatar";
6import { AvatarGroup } from "@/registry/bases/base/ui/avatar-group";
7 
8const avatars = [
9  {
10    name: "shadcn",
11    src: "https://github.com/shadcn.png",
12    fallback: "CN",
13  },
14  {
15    name: "Ethan Niser",
16    src: "https://github.com/ethanniser.png",
17    fallback: "EN",
18  },
19  {
20    name: "Guillermo Rauch",
21    src: "https://github.com/rauchg.png",
22    fallback: "GR",
23  },
24  {
25    name: "Lee Robinson",
26    src: "https://github.com/leerob.png",
27    fallback: "LR",
28  },
29];
30 
31export default function AvatarGroupRtlDemo() {
32  return (
33    <div className="grid gap-6 md:grid-cols-2">
34      <div className="flex flex-col gap-3">
35        <h3 className="font-medium text-sm">RTL</h3>
36        <AvatarGroup dir="rtl">
37          {avatars.map((avatar, index) => (
38            <Avatar key={index}>
39              <AvatarImage src={avatar.src} />
40              <AvatarFallback>{avatar.fallback}</AvatarFallback>
41            </Avatar>
42          ))}
43        </AvatarGroup>
44      </div>
45      <div className="flex flex-col gap-3">
46        <h3 className="font-medium text-sm">Reverse RTL</h3>
47        <AvatarGroup dir="rtl" reverse>
48          {avatars.map((avatar, index) => (
49            <Avatar key={index}>
50              <AvatarImage src={avatar.src} />
51              <AvatarFallback>{avatar.fallback}</AvatarFallback>
52            </Avatar>
53          ))}
54        </AvatarGroup>
55      </div>
56      <div className="flex flex-col gap-3">
57        <h3 className="font-medium text-sm">Vertical RTL</h3>
58        <div className="flex justify-center">
59          <AvatarGroup orientation="vertical" dir="rtl">
60            {avatars.map((avatar, index) => (
61              <Avatar key={index}>
62                <AvatarImage src={avatar.src} />
63                <AvatarFallback>{avatar.fallback}</AvatarFallback>
64              </Avatar>
65            ))}
66          </AvatarGroup>
67        </div>
68      </div>
69      <div className="flex flex-col gap-3">
70        <h3 className="font-medium text-sm">Vertical reverse RTL</h3>
71        <div className="flex justify-center">
72          <AvatarGroup orientation="vertical" dir="rtl" reverse>
73            {avatars.map((avatar, index) => (
74              <Avatar key={index}>
75                <AvatarImage src={avatar.src} />
76                <AvatarFallback>{avatar.fallback}</AvatarFallback>
77              </Avatar>
78            ))}
79          </AvatarGroup>
80        </div>
81      </div>
82// … truncated