avatar-group-icons-demo

1import { Bell, Heart, MessageCircle, Settings, Star, User } from "lucide-react";
2import { AvatarGroup } from "@/registry/bases/base/ui/avatar-group";
3 
4const iconData = [
5  { icon: User, color: "bg-blue-500" },
6  { icon: Heart, color: "bg-red-500" },
7  { icon: Star, color: "bg-yellow-500" },
8  { icon: MessageCircle, color: "bg-green-500" },
9  { icon: Settings, color: "bg-purple-500" },
10  { icon: Bell, color: "bg-orange-500" },
11];
12 
13export default function AvatarGroupIconsDemo() {
14  return (
15    <div className="grid grid-cols-1 gap-6 md:grid-cols-2">
16      <div className="flex flex-col gap-3">
17        <h3 className="font-medium text-sm">Icon Group</h3>
18        <AvatarGroup>
19          {iconData.slice(0, 4).map((item, index) => {
20            const IconComponent = item.icon;
21            return (
22              <div
23                key={index}
24                className={`flex size-10 items-center justify-center rounded-full text-white ${item.color}`}
25              >
26                <IconComponent size={16} />
27              </div>
28            );
29          })}
30        </AvatarGroup>
31      </div>
32      <div className="flex flex-col gap-3">
33        <h3 className="font-medium text-sm">Icon Group with Truncation</h3>
34        <AvatarGroup max={3}>
35          {iconData.map((item, index) => {
36            const IconComponent = item.icon;
37            return (
38              <div
39                key={index}
40                className={`flex size-10 items-center justify-center rounded-full text-white ${item.color}`}
41              >
42                <IconComponent size={16} />
43              </div>
44            );
45          })}
46        </AvatarGroup>
47      </div>
48      <div className="flex flex-col gap-3">
49        <h3 className="font-medium text-sm">Reverse Icon Group</h3>
50        <AvatarGroup reverse>
51          {iconData.slice(0, 4).map((item, index) => {
52            const IconComponent = item.icon;
53            return (
54              <div
55                key={index}
56                className={`flex size-10 items-center justify-center rounded-full text-white ${item.color}`}
57              >
58                <IconComponent size={16} />
59              </div>
60            );
61          })}
62        </AvatarGroup>
63      </div>
64      <div className="flex flex-col gap-3">
65        <h3 className="font-medium text-sm">Reverse with Truncation</h3>
66        <AvatarGroup reverse max={3}>
67          {iconData.map((item, index) => {
68            const IconComponent = item.icon;
69            return (
70// … truncated