Context Menu

import {
  ContextMenu,
  ContextMenuContent,
  ContextMenuItem,
  ContextMenuShortcut,
  ContextMenuSub,
  ContextMenuSubContent,
  ContextMenuSubTrigger,
  ContextMenuTrigger,
} from "@/components/ui/context-menu";

export default function Basic() {
  return (
    <ContextMenu>
      <ContextMenuTrigger className="grid h-[150px] w-[300px] place-items-center rounded border-2 border-dashed p-4 text-center text-sm">
        Right click here to open the bookmark context menu
      </ContextMenuTrigger>
      <ContextMenuContent className="w-64">
        <ContextMenuItem>
          Edit bookmark
          <ContextMenuShortcut>⌘E</ContextMenuShortcut>
        </ContextMenuItem>
        <ContextMenuItem>
          Delete bookmark
          <ContextMenuShortcut>⌘D</ContextMenuShortcut>
        </ContextMenuItem>
        <ContextMenuItem>
          Copy link
          <ContextMenuShortcut>⌘C</ContextMenuShortcut>
        </ContextMenuItem>
        <ContextMenuItem>
          Open in new tab
          <ContextMenuShortcut>⌘T</ContextMenuShortcut>
        </ContextMenuItem>
        <ContextMenuSub>
          <ContextMenuSubTrigger>Add to folder</ContextMenuSubTrigger>
          <ContextMenuSubContent className="w-48">
            <ContextMenuItem>Work</ContextMenuItem>
            <ContextMenuItem>Personal</ContextMenuItem>
            <ContextMenuItem>Travel</ContextMenuItem>
            <ContextMenuItem>Create new folder</ContextMenuItem>
          </ContextMenuSubContent>
        </ContextMenuSub>
        <ContextMenuItem>
          Share bookmark
          <ContextMenuShortcut>⇧⌘S</ContextMenuShortcut>
        </ContextMenuItem>
      </ContextMenuContent>
    </ContextMenu>
  );
}

import {
  ContextMenu,
  ContextMenuContent,
  ContextMenuItem,
  ContextMenuSeparator,
  ContextMenuTrigger,
} from "@/components/ui/context-menu";
import {
  Copy,
  Envelope,
  Lightning,
  Share,
  SlashCircle,
} from "@mynaui/icons-react";

export default function WithIcons() {
  return (
    <ContextMenu>
      <ContextMenuTrigger className="grid h-[150px] w-[300px] place-items-center rounded border-2 border-dashed p-4 text-center text-sm">
        Right click here to manage folder sharing
      </ContextMenuTrigger>
      <ContextMenuContent className="w-64">
        <ContextMenuItem>
          <Share stroke={2} />
          Share folder with others
        </ContextMenuItem>
        <ContextMenuItem>
          <SlashCircle stroke={2} />
          Unshare folder
        </ContextMenuItem>
        <ContextMenuItem>
          <Lightning stroke={2} />
          Change sharing permissions
        </ContextMenuItem>
        <ContextMenuSeparator />
        <ContextMenuItem>
          <Copy stroke={2} />
          Copy share link
        </ContextMenuItem>
        <ContextMenuItem>
          <Envelope stroke={2} />
          Email share link
        </ContextMenuItem>
      </ContextMenuContent>
    </ContextMenu>
  );
}

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 stroke={2} />
          View Profile
        </ContextMenuItem>
        <ContextMenuItem>
          <Edit stroke={2} />
          Edit Profile
        </ContextMenuItem>
        <ContextMenuItem>
          <Image stroke={2} />
          Change Avatar
        </ContextMenuItem>
        <ContextMenuItem>
          <Pencil stroke={2} />
          Update Bio
        </ContextMenuItem>
        <ContextMenuSeparator />
        <ContextMenuItem>
          <Bookmark stroke={2} />
          View Bookmarks
        </ContextMenuItem>
        <ContextMenuItem>
          <Share stroke={2} />
          View Shared Bookmarks
        </ContextMenuItem>
        <ContextMenuSeparator />
        <ContextMenuItem>
          <UserPlus stroke={2} />
          Manage Followers
        </ContextMenuItem>
        <ContextMenuItem>
          <Users stroke={2} />
          Manage Following
        </ContextMenuItem>
        <ContextMenuSeparator />
        <ContextMenuItem>
          <Cog stroke={2} />
          Account Settings
        </ContextMenuItem>
        <ContextMenuItem>
          <Lock stroke={2} />
          Privacy Settings
        </ContextMenuItem>
        <ContextMenuItem>
          <Bell stroke={2} />
          Notification Settings
        </ContextMenuItem>
        <ContextMenuSeparator />
        <ContextMenuItem>
          <Logout stroke={2} />
          Logout
        </ContextMenuItem>
      </ContextMenuContent>
    </ContextMenu>
  );
}

import {
  ContextMenu,
  ContextMenuContent,
  ContextMenuItem,
  ContextMenuSeparator,
  ContextMenuShortcut,
  ContextMenuSub,
  ContextMenuSubContent,
  ContextMenuSubTrigger,
  ContextMenuTrigger,
} from "@/components/ui/context-menu";
import {
  Copy,
  Download,
  Edit,
  File,
  Folder,
  Move,
  Trash,
} from "@mynaui/icons-react";

export default function FileOptions() {
  return (
    <ContextMenu>
      <ContextMenuTrigger className="grid h-[150px] w-[300px] place-items-center rounded border-2 border-dashed p-4 text-center text-sm">
        Right click a file for options
      </ContextMenuTrigger>
      <ContextMenuContent className="w-64">
        <ContextMenuItem>
          <File stroke={2} />
          Open
        </ContextMenuItem>
        <ContextMenuItem>
          <Edit stroke={2} />
          Rename
        </ContextMenuItem>
        <ContextMenuItem>
          <Copy stroke={2} />
          Make a copy
        </ContextMenuItem>
        <ContextMenuSub>
          <ContextMenuSubTrigger className="gap-2">
            <Move stroke={2} />
            Move to
          </ContextMenuSubTrigger>
          <ContextMenuSubContent className="w-48">
            <ContextMenuItem>
              <Folder stroke={2} />
              Documents
            </ContextMenuItem>
            <ContextMenuItem>
              <Folder stroke={2} />
              Media
            </ContextMenuItem>
          </ContextMenuSubContent>
        </ContextMenuSub>
        <ContextMenuItem>
          <Download stroke={2} />
          Download
          <ContextMenuShortcut>⇧⌘D</ContextMenuShortcut>
        </ContextMenuItem>
        <ContextMenuSeparator />
        <ContextMenuItem variant="destructive">
          <Trash stroke={2} />
          Delete
        </ContextMenuItem>
      </ContextMenuContent>
    </ContextMenu>
  );
}

import {
  ContextMenu,
  ContextMenuCheckboxItem,
  ContextMenuContent,
  ContextMenuLabel,
  ContextMenuRadioGroup,
  ContextMenuRadioItem,
  ContextMenuSeparator,
  ContextMenuTrigger,
} from "@/components/ui/context-menu";
import {
  Desktop,
  Layout,
  Moon,
  Sidebar,
  Sun,
} from "@mynaui/icons-react";

export default function ThemeOptions() {
  return (
    <ContextMenu>
      <ContextMenuTrigger className="grid h-[150px] w-[300px] place-items-center rounded border-2 border-dashed p-4 text-center text-sm">
        Right click to customize appearance
      </ContextMenuTrigger>
      <ContextMenuContent className="w-56">
        <ContextMenuLabel inset>Theme</ContextMenuLabel>
        <ContextMenuRadioGroup value="system">
          <ContextMenuRadioItem value="light">
            <Sun stroke={2} />
            Light
          </ContextMenuRadioItem>
          <ContextMenuRadioItem value="dark">
            <Moon stroke={2} />
            Dark
          </ContextMenuRadioItem>
          <ContextMenuRadioItem value="system">
            <Desktop stroke={2} />
            System
          </ContextMenuRadioItem>
        </ContextMenuRadioGroup>
        <ContextMenuSeparator />
        <ContextMenuCheckboxItem checked>
          <Sidebar stroke={2} />
          Show sidebar
        </ContextMenuCheckboxItem>
        <ContextMenuCheckboxItem>
          <Layout stroke={2} />
          Compact view
        </ContextMenuCheckboxItem>
      </ContextMenuContent>
    </ContextMenu>
  );
}

import {
  ContextMenu,
  ContextMenuContent,
  ContextMenuItem,
  ContextMenuSeparator,
  ContextMenuShortcut,
  ContextMenuTrigger,
} from "@/components/ui/context-menu";
import {
  CheckSquare,
  Clipboard,
  Copy,
  Redo,
  Scissors,
  Undo,
} from "@mynaui/icons-react";

export default function EditTextMenu() {
  return (
    <ContextMenu>
      <ContextMenuTrigger className="grid h-[150px] w-[300px] place-items-center rounded border-2 border-dashed p-4 text-center text-sm">
        Right click to edit text
      </ContextMenuTrigger>
      <ContextMenuContent className="w-48">
        <ContextMenuItem>
          <Undo stroke={2} />
          Undo
          <ContextMenuShortcut>⌘Z</ContextMenuShortcut>
        </ContextMenuItem>
        <ContextMenuItem>
          <Redo stroke={2} />
          Redo
          <ContextMenuShortcut>⇧⌘Z</ContextMenuShortcut>
        </ContextMenuItem>
        <ContextMenuSeparator />
        <ContextMenuItem>
          <Scissors stroke={2} />
          Cut
          <ContextMenuShortcut>⌘X</ContextMenuShortcut>
        </ContextMenuItem>
        <ContextMenuItem>
          <Copy stroke={2} />
          Copy
          <ContextMenuShortcut>⌘C</ContextMenuShortcut>
        </ContextMenuItem>
        <ContextMenuItem>
          <Clipboard stroke={2} />
          Paste
          <ContextMenuShortcut>⌘V</ContextMenuShortcut>
        </ContextMenuItem>
        <ContextMenuSeparator />
        <ContextMenuItem>
          <CheckSquare stroke={2} />
          Select All
          <ContextMenuShortcut>⌘A</ContextMenuShortcut>
        </ContextMenuItem>
      </ContextMenuContent>
    </ContextMenu>
  );
}