Avatar

1import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
2 
3export default function AvatarWithStatusIcon() {
4  return (
5    <div className="flex gap-2">
6      <div className="relative">
7        <Avatar>
8          <AvatarImage src="https://www.tobybelhome.com/user.png" />
9          <AvatarFallback>CN</AvatarFallback>
10        </Avatar>
11        <div className="border-background absolute -end-0.5 -top-0.5 size-3 rounded-full border-2 bg-green-500">
12          <span className="sr-only">Online</span>
13        </div>
14      </div>
15 
16      <div className="relative">
17        <Avatar>
18          <AvatarImage src="https://github.com/shadcn.png" />
19          <AvatarFallback>CN</AvatarFallback>
20        </Avatar>
21        <div className="border-background absolute -end-0.5 -bottom-0.5 size-3 rounded-full border-2 bg-red-500">
22          <span className="sr-only">Offline</span>
23        </div>
24      </div>
25 
26      <div className="relative">
27        <Avatar>
28          <AvatarImage src="https://images.unsplash.com/photo-1654110455429-cf322b40a906?ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTB8fGF2YXRhcnxlbnwwfHwwfHx8MA%3D%3D&auto=format&fit=crop&q=60&w=300" />
29          <AvatarFallback>TB</AvatarFallback>
30        </Avatar>
31        <div className="border-background absolute -end-0.5 -top-0.5 size-3 rounded-full border-2 bg-orange-400">
32          <span className="sr-only">Offline</span>
33        </div>
34      </div>
35    </div>
36  );
37}