Context Menu

 1import {
 2  ContextMenu,
 3  ContextMenuContent,
 4  ContextMenuGroup,
 5  ContextMenuItem,
 6  ContextMenuLabel,
 7  ContextMenuSeparator,
 8  ContextMenuShortcut,
 9  ContextMenuTrigger,
10} from "@/components/wensity/context-menu";
11import { IconClipboard, IconCopy, IconPencil, IconScissors, IconShare } from "@tabler/icons-react";
12
13export function ContextMenuGrouped() {
14  return (
15    <ContextMenu>
16      <ContextMenuTrigger asChild>
17        <div className="flex h-28 items-center justify-center rounded-lg border border-dashed">
18          Right-click this area
19        </div>
20      </ContextMenuTrigger>
21      <ContextMenuContent>
22        <ContextMenuGroup>
23          <ContextMenuLabel>Clipboard</ContextMenuLabel>
24          <ContextMenuItem>
25            <IconCopy className="size-4" />
26            Copy
27            <ContextMenuShortcut>⌘C</ContextMenuShortcut>
28          </ContextMenuItem>
29          <ContextMenuItem>
30            <IconScissors className="size-4" />
31            Cut
32            <ContextMenuShortcut>⌘X</ContextMenuShortcut>
33          </ContextMenuItem>
34          <ContextMenuItem>
35            <IconClipboard className="size-4" />
36            Paste
37            <ContextMenuShortcut>⌘V</ContextMenuShortcut>
38          </ContextMenuItem>
39        </ContextMenuGroup>
40        <ContextMenuSeparator />
41        <ContextMenuGroup>
42          <ContextMenuLabel>Actions</ContextMenuLabel>
43          <ContextMenuItem>
44            <IconPencil className="size-4" />
45            Rename
46          </ContextMenuItem>
47          <ContextMenuItem>
48            <IconShare className="size-4" />
49            Share
50          </ContextMenuItem>
51        </ContextMenuGroup>
52      </ContextMenuContent>
53    </ContextMenu>
54  );
55}

 1import {
 2  ContextMenu,
 3  ContextMenuContent,
 4  ContextMenuItem,
 5  ContextMenuSub,
 6  ContextMenuSubContent,
 7  ContextMenuSubTrigger,
 8  ContextMenuTrigger,
 9} from "@/components/wensity/context-menu";
10import { IconDownload, IconLink } from "@tabler/icons-react";
11
12export function ContextMenuNested() {
13  return (
14    <ContextMenu>
15      <ContextMenuTrigger asChild>
16        <div className="flex h-28 items-center justify-center rounded-lg border border-dashed">
17          Right-click for submenus
18        </div>
19      </ContextMenuTrigger>
20      <ContextMenuContent>
21        <ContextMenuItem>
22          <IconLink className="size-4" />
23          Copy link
24        </ContextMenuItem>
25        <ContextMenuSub>
26          <ContextMenuSubTrigger>
27            <IconDownload className="size-4" />
28            Export as
29          </ContextMenuSubTrigger>
30          <ContextMenuSubContent>
31            <ContextMenuItem>PNG</ContextMenuItem>
32            <ContextMenuItem>SVG</ContextMenuItem>
33            <ContextMenuItem>PDF</ContextMenuItem>
34          </ContextMenuSubContent>
35        </ContextMenuSub>
36      </ContextMenuContent>
37    </ContextMenu>
38  );
39}

 1import { useState } from "react";
 2import {
 3  ContextMenu,
 4  ContextMenuCheckboxItem,
 5  ContextMenuContent,
 6  ContextMenuLabel,
 7  ContextMenuTrigger,
 8} from "@/components/wensity/context-menu";
 9
10export function ContextMenuCheckbox() {
11  const [showGrid, setShowGrid] = useState(true);
12  const [showRuler, setShowRuler] = useState(false);
13
14  return (
15    <ContextMenu>
16      <ContextMenuTrigger asChild>
17        <div className="flex h-28 items-center justify-center rounded-lg border border-dashed">
18          Right-click to toggle options
19        </div>
20      </ContextMenuTrigger>
21      <ContextMenuContent>
22        <ContextMenuLabel>View</ContextMenuLabel>
23        <ContextMenuCheckboxItem checked={showGrid} onCheckedChange={setShowGrid}>
24          Show grid
25        </ContextMenuCheckboxItem>
26        <ContextMenuCheckboxItem checked={showRuler} onCheckedChange={setShowRuler}>
27          Show ruler
28        </ContextMenuCheckboxItem>
29      </ContextMenuContent>
30    </ContextMenu>
31  );
32}

 1import { useState } from "react";
 2import {
 3  ContextMenu,
 4  ContextMenuContent,
 5  ContextMenuLabel,
 6  ContextMenuRadioGroup,
 7  ContextMenuRadioItem,
 8  ContextMenuTrigger,
 9} from "@/components/wensity/context-menu";
10
11export function ContextMenuRadio() {
12  const [view, setView] = useState("list");
13
14  return (
15    <ContextMenu>
16      <ContextMenuTrigger asChild>
17        <div className="flex h-28 items-center justify-center rounded-lg border border-dashed">
18          Right-click to choose a layout
19        </div>
20      </ContextMenuTrigger>
21      <ContextMenuContent>
22        <ContextMenuLabel>Layout</ContextMenuLabel>
23        <ContextMenuRadioGroup value={view} onValueChange={setView}>
24          <ContextMenuRadioItem value="list">List</ContextMenuRadioItem>
25          <ContextMenuRadioItem value="grid">Grid</ContextMenuRadioItem>
26        </ContextMenuRadioGroup>
27      </ContextMenuContent>
28    </ContextMenu>
29  );
30}

 1import {
 2  ContextMenu,
 3  ContextMenuContent,
 4  ContextMenuItem,
 5  ContextMenuSeparator,
 6  ContextMenuShortcut,
 7  ContextMenuTrigger,
 8} from "@/components/wensity/context-menu";
 9import { IconCopy, IconTrash } from "@tabler/icons-react";
10
11export function ContextMenuDestructive() {
12  return (
13    <ContextMenu>
14      <ContextMenuTrigger asChild>
15        <div className="flex h-28 items-center justify-center rounded-lg border border-dashed">
16          Right-click for danger zone
17        </div>
18      </ContextMenuTrigger>
19      <ContextMenuContent>
20        <ContextMenuItem>
21          <IconCopy className="size-4" />
22          Duplicate
23        </ContextMenuItem>
24        <ContextMenuSeparator />
25        <ContextMenuItem destructive>
26          <IconTrash className="size-4" />
27          Delete permanently
28          <ContextMenuShortcut>⌘⌫</ContextMenuShortcut>
29        </ContextMenuItem>
30      </ContextMenuContent>
31    </ContextMenu>
32  );
33}