avatar-group-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 
41export default function AvatarGroupDemo() {
42  return (
43    <div className="flex flex-col gap-8">
44      <div className="flex flex-col gap-3">
45        <h3 className="font-medium text-sm">Avatar Group</h3>
46        <AvatarGroup>
47          {avatars.slice(0, 4).map((avatar, index) => (
48            <Avatar key={index}>
49              <AvatarImage src={avatar.src} />
50              <AvatarFallback>{avatar.fallback}</AvatarFallback>
51            </Avatar>
52          ))}
53        </AvatarGroup>
54      </div>
55      <div className="flex flex-col gap-3">
56        <h3 className="font-medium text-sm">
57          Avatar Group with overflow (max 4)
58        </h3>
59        <AvatarGroup max={4}>
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  );
70}