Avatargroups5

1"use client";
2 
3import { Avatar, AvatarFallback, AvatarImage } from "@/ui/avatar";
4 
5export default function AvatarGroup5() {
6  const users = [
7    { name: "Sophie Martin", image: "https://mynaui.com/avatars/avatar-15.webp" },
8    { name: "Leo Anderson", image: "https://mynaui.com/avatars/avatar-16.webp" },
9    { name: "Chloe Thompson", image: "https://mynaui.com/avatars/avatar-17.webp" },
10    { name: "Max Rodriguez", image: "https://mynaui.com/avatars/avatar-18.webp" },
11    { name: "Zoe Garcia", image: "https://mynaui.com/avatars/avatar-19.webp" },
12    { name: "Additional Users", count: 3 },
13  ];
14 
15  return (
16    <div className="flex items-center -space-x-2 *:ring-3 *:ring-background">
17      {users.slice(0, 4).map((user, index) => (
18        <Avatar
19          key={index}
20        >
21          <AvatarImage src={user.image} alt={user.name} />
22          <AvatarFallback>
23            {user.name
24              .split(" ")
25              .map((n) => n[0])
26              .join("")}
27          </AvatarFallback>
28        </Avatar>
29      ))}
30      {users.length > 4 && (
31        <Avatar className="z-10 text-sm font-medium text-muted-foreground">
32          <AvatarFallback>
33            +{users.slice(4).reduce((acc, user) => acc + (user.count || 1), 0)}
34          </AvatarFallback>
35        </Avatar>
36      )}
37    </div>
38  );
39}