Avatargroups4

1"use client";
2 
3import { useState } from "react";
4import { Avatar, AvatarFallback, AvatarImage } from "@/ui/avatar";
5import {
6  Tooltip,
7  TooltipContent,
8  TooltipProvider,
9  TooltipTrigger,
10} from "@/ui/tooltip";
11 
12export default function AvatarGroup4() {
13  const [activeIndex, setActiveIndex] = useState<number | null>(null);
14  const users = [
15    {
16      name: "Liam Wilson",
17      role: "Designer",
18      image: "https://mynaui.com/avatars/avatar-10.webp",
19    },
20    {
21      name: "Emma Davis",
22      role: "Developer",
23      image: "https://mynaui.com/avatars/avatar-11.webp",
24    },
25    {
26      name: "Noah Brown",
27      role: "Manager",
28      image: "https://mynaui.com/avatars/avatar-12.webp",
29    },
30    {
31      name: "Olivia Johnson",
32      role: "Marketing",
33      image: "https://mynaui.com/avatars/avatar-13.webp",
34    },
35  ];
36 
37  return (
38    <TooltipProvider delayDuration={0}>
39      <div className="flex -space-x-2 *:ring-3 *:ring-background">
40        {users.map((user, index) => (
41          <Tooltip key={index}>
42            <TooltipTrigger asChild>
43              <Avatar
44                className={`transition-transform ${
45                  activeIndex === index ? "z-10 scale-110" : ""
46                }`}
47                onMouseEnter={() => setActiveIndex(index)}
48                onMouseLeave={() => setActiveIndex(null)}
49              >
50                <AvatarImage src={user.image} alt={user.name} />
51                <AvatarFallback>
52                  {user.name
53                    .split(" ")
54                    .map((n) => n[0])
55                    .join("")}
56                </AvatarFallback>
57              </Avatar>
58            </TooltipTrigger>
59            <TooltipContent>
60              <p className="font-semibold">{user.name}</p>
61              <p className="text-sm">{user.role}</p>
62            </TooltipContent>
63          </Tooltip>
64        ))}
65      </div>
66    </TooltipProvider>
67  );
68}