Status badge

1import {
2  Avatar,
3  AvatarBadge,
4  AvatarFallback,
5  AvatarImage,
6} from '@/components/ui/avatar'
7 
8export function Avatar06() {
9  return (
10    <div className="flex items-center gap-4">
11      <Avatar>
12        <AvatarImage
13          src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?q=80&w=200&auto=format&fit=crop"
14          alt="Sofia Rodrigues — online"
15        />
16        <AvatarFallback>SR</AvatarFallback>
17        <AvatarBadge className="bg-emerald-500" />
18      </Avatar>
19      <Avatar>
20        <AvatarImage
21          src="https://images.unsplash.com/photo-1500648767791-00dcc994a43e?q=80&w=200&auto=format&fit=crop"
22          alt="Liam Carter — away"
23        />
24        <AvatarFallback>LC</AvatarFallback>
25        <AvatarBadge className="bg-amber-500" />
26      </Avatar>
27      <Avatar>
28        <AvatarImage
29          src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?q=80&w=200&auto=format&fit=crop"
30          alt="Ana Moreira — offline"
31        />
32        <AvatarFallback>AM</AvatarFallback>
33        <AvatarBadge className="bg-muted-foreground" />
34      </Avatar>
35    </div>
36  )
37}