Badge4

1import { Avatar, AvatarFallback, AvatarImage } from "@/ui/avatar";
2import { Badge } from "@/ui/badge";
3import { X } from "@mynaui/icons-react";
4 
5interface User {
6  id: number;
7  name: string;
8  image: string;
9}
10 
11const users: User[] = [
12  {
13    id: 1,
14    name: "Alessandro",
15    image: "https://mynaui.com/avatars/avatar-05.webp",
16  },
17  {
18    id: 2,
19    name: "Jane Smith",
20    image: "https://mynaui.com/avatars/avatar-06.webp",
21  },
22  {
23    id: 3,
24    name: "Alex Johnson",
25    image: "https://mynaui.com/avatars/avatar-07.webp",
26  },
27];
28 
29export default function Badge4() {
30  return (
31    <div className="flex flex-wrap gap-2">
32      {users.map((user) => (
33        <Badge
34          key={user.id}
35          variant="outline"
36          className="flex items-center gap-1 pl-0.5 pr-1.5"
37        >
38          <Avatar className="size-5">
39            <AvatarImage src={user.image} alt={user.name} />
40            <AvatarFallback>
41              {user.name
42                .split(" ")
43                .map((n) => n[0])
44                .join("")}
45            </AvatarFallback>
46          </Avatar>
47          <span>{user.name}</span>
48          <button>
49            <X className="size-3 cursor-pointer stroke-2 opacity-60 hover:opacity-100" />
50          </button>
51        </Badge>
52      ))}
53    </div>
54  );
55}