import { Avatar, AvatarFallback } from "@/components/ui/avatar";
import {
  ContextMenu,
  ContextMenuContent,
  ContextMenuItem,
  ContextMenuSeparator,
  ContextMenuTrigger,
} from "@/components/ui/context-menu";
import {
  Bell,
  Bookmark,
  Cog,
  Edit,
  Image,
  Lock,
  Logout,
  Pencil,
  Share,
  User,
  UserPlus,
  Users,
} from "@mynaui/icons-react";

export default function WithAvatar() {
  return (
    <ContextMenu>
      <ContextMenuTrigger className="flex cursor-pointer items-center gap-2 p-4 text-xs">
        <Avatar className="size-8">
          <AvatarFallback>PJ</AvatarFallback>
        </Avatar>
        <span className="font-medium">Right Click Here</span>
      </ContextMenuTrigger>
      <ContextMenuContent className="w-64">
        <ContextMenuItem>
          <User className="mr-2 size-4" stroke={2} />
          View Profile
        </ContextMenuItem>
        <ContextMenuItem>
          <Edit className="mr-2 size-4" stroke={2} />
          Edit Profile
        </ContextMenuItem>
        <ContextMenuItem>
          <Image className="mr-2 size-4" stroke={2} />
          Change Avatar
        </ContextMenuItem>
        <ContextMenuItem>
          <Pencil className="mr-2 size-4" stroke={2} />
          Update Bio
        </ContextMenuItem>
        <ContextMenuSeparator />
        <ContextMenuItem>
          <Bookmark className="mr-2 size-4" stroke={2} />
          View Bookmarks
        </ContextMenuItem>
        <ContextMenuItem>
          <Share className="mr-2 size-4" stroke={2} />
          View Shared Bookmarks
        </ContextMenuItem>
        <ContextMenuSeparator />
        <ContextMenuItem>
          <UserPlus className="mr-2 size-4" stroke={2} />
          Manage Followers
        </ContextMenuItem>
        <ContextMenuItem>
          <Users className="mr-2 size-4" stroke={2} />
          Manage Following
        </ContextMenuItem>
        <ContextMenuSeparator />
        <ContextMenuItem>
          <Cog className="mr-2 size-4" stroke={2} />
          Account Settings
        </ContextMenuItem>
        <ContextMenuItem>
          <Lock className="mr-2 size-4" stroke={2} />
          Privacy Settings
        </ContextMenuItem>
        <ContextMenuItem>
          <Bell className="mr-2 size-4" stroke={2} />
          Notification Settings
        </ContextMenuItem>
        <ContextMenuSeparator />
        <ContextMenuItem>
          <Logout className="mr-2 size-4" stroke={2} />
          Logout
        </ContextMenuItem>
      </ContextMenuContent>
    </ContextMenu>
  );
}
Context Menu

Context Menu
