Avatar Dropdown Menu

1import {
2  DropdownMenu,
3  DropdownMenuContent,
4  DropdownMenuGroup,
5  DropdownMenuItem,
6  DropdownMenuLabel,
7  DropdownMenuSeparator,
8  DropdownMenuShortcut,
9  DropdownMenuTrigger,
10} from "@/components/ui/dropdown-menu";
11import { Avatar, AvatarFallback, AvatarImage } from "@/registry/ui/avatar";
12 
13export default function AvatarDropdownMenu() {
14  return (
15    <DropdownMenu>
16      <DropdownMenuTrigger asChild>
17        <Avatar>
18          <AvatarImage alt="@shadcn" src="https://github.com/shadcn.png" />
19          <AvatarFallback>CN</AvatarFallback>
20        </Avatar>
21      </DropdownMenuTrigger>
22      <DropdownMenuContent align="start" className="w-40">
23        <DropdownMenuGroup>
24          <DropdownMenuLabel>My Account</DropdownMenuLabel>
25          <DropdownMenuItem>Profile</DropdownMenuItem>
26          <DropdownMenuItem>Billing</DropdownMenuItem>
27          <DropdownMenuItem>
28            Settings
29            <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>
30          </DropdownMenuItem>
31        </DropdownMenuGroup>
32        <DropdownMenuSeparator />
33        <DropdownMenuGroup>
34          <DropdownMenuItem variant="destructive">Log out</DropdownMenuItem>
35        </DropdownMenuGroup>
36      </DropdownMenuContent>
37    </DropdownMenu>
38  );
39}