Context Menu

1import {
2  ContextMenu,
3  ContextMenuTrigger,
4  ContextMenuContent,
5  ContextMenuItem,
6  ContextMenuCheckboxItem,
7  ContextMenuRadioItem,
8  ContextMenuLabel,
9  ContextMenuSeparator,
10  ContextMenuSub,
11  ContextMenuSubContent,
12  ContextMenuSubTrigger,
13  ContextMenuRadioGroup,
14} from "@/components/ui/context-menu";
15
16export function Example() {
17  const [checked, setChecked] = React.useState(false);
18  const [radioValue, setRadioValue] = React.useState("option1");
19
20  return (
21    <ContextMenu>
22      <ContextMenuTrigger
23        className="flex h-[150px] w-[300px] items-center justify-center rounded-md border border-dashed text-sm"
24        customCursor={
25          <div className="w-4 h-4 bg-red-500 rounded-full border-2 border-white shadow-lg" />
26        }
27      >
28        Right click
29      </ContextMenuTrigger>
30      <ContextMenuContent>
31        <ContextMenuLabel>Options</ContextMenuLabel>
32        <ContextMenuItem onClick={() => alert("Edit clicked")}>Edit</ContextMenuItem>
33        <ContextMenuItem onClick={() => alert("Delete clicked")}>Delete</ContextMenuItem>
34        <ContextMenuSeparator />
35        <ContextMenuCheckboxItem
36          checked={checked}
37          onCheckedChange={setChecked}
38        >
39          Checkbox Option
40        </ContextMenuCheckboxItem>
41        <ContextMenuSeparator />
42        <ContextMenuRadioGroup
43          value={radioValue}
44          onValueChange={setRadioValue}
45        >
46          <ContextMenuRadioItem value="option1">Option 1</ContextMenuRadioItem>
47          <ContextMenuRadioItem value="option2">Option 2</ContextMenuRadioItem>
48        </ContextMenuRadioGroup>
49        <ContextMenuSeparator />
50        <ContextMenuSub>
51          <ContextMenuSubTrigger>More</ContextMenuSubTrigger>
52          <ContextMenuSubContent>
53            <ContextMenuItem>Sub Option 1</ContextMenuItem>
54            <ContextMenuItem>Sub Option 2</ContextMenuItem>
55          </ContextMenuSubContent>
56        </ContextMenuSub>
57      </ContextMenuContent>
58    </ContextMenu>
59  );
60}