avatar-group-truncation-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    name: "Evil Rabbit",
31    src: "https://github.com/evilrabbit.png",
32    fallback: "ER",
33  },
34  {
35    name: "Tim Neutkens",
36    src: "https://github.com/timneutkens.png",
37    fallback: "TN",
38  },
39  {
40    name: "Delba de Oliveira",
41    src: "https://github.com/delbaoliveira.png",
42    fallback: "DO",
43  },
44  {
45    name: "Shu Ding",
46    src: "https://github.com/shuding.png",
47    fallback: "SD",
48  },
49];
50 
51export default function AvatarGroupTruncationDemo() {
52  return (
53    <div className="flex flex-col gap-6">
54      <div className="flex flex-col gap-3">
55        <h3 className="font-medium text-sm">Max 3 items</h3>
56        <AvatarGroup max={3}>
57          {avatars.map((avatar, index) => (
58            <Avatar key={index}>
59              <AvatarImage src={avatar.src} />
60              <AvatarFallback>{avatar.fallback}</AvatarFallback>
61            </Avatar>
62          ))}
63        </AvatarGroup>
64      </div>
65      <div className="flex flex-col gap-3">
66        <h3 className="font-medium text-sm">Max 5 items</h3>
67        <AvatarGroup max={5}>
68          {avatars.map((avatar, index) => (
69            <Avatar key={index}>
70              <AvatarImage src={avatar.src} />
71              <AvatarFallback>{avatar.fallback}</AvatarFallback>
72            </Avatar>
73          ))}
74        </AvatarGroup>
75      </div>
76    </div>
77  );
78}