Context Menu

1"use client"
2 
3import * as React from "react"
4 
5import {
6  Example,
7  ExampleWrapper,
8} from "@/registry/bases/radix/components/example"
9import { Button } from "@/registry/bases/radix/ui/button"
10import {
11  ContextMenu,
12  ContextMenuCheckboxItem,
13  ContextMenuContent,
14  ContextMenuGroup,
15  ContextMenuItem,
16  ContextMenuLabel,
17  ContextMenuRadioGroup,
18  ContextMenuRadioItem,
19  ContextMenuSeparator,
20  ContextMenuShortcut,
21  ContextMenuSub,
22  ContextMenuSubContent,
23  ContextMenuSubTrigger,
24  ContextMenuTrigger,
25} from "@/registry/bases/radix/ui/context-menu"
26import {
27  Dialog,
28  DialogContent,
29  DialogDescription,
30  DialogHeader,
31  DialogTitle,
32  DialogTrigger,
33} from "@/registry/bases/radix/ui/dialog"
34import { IconPlaceholder } from "@/app/(create)/components/icon-placeholder"
35 
36export default function ContextMenuExample() {
37  return (
38    <ExampleWrapper>
39      <ContextMenuBasic />
40      <ContextMenuWithSides />
41      <ContextMenuWithIcons />
42      <ContextMenuWithShortcuts />
43      <ContextMenuWithSubmenu />
44      <ContextMenuWithGroups />
45      <ContextMenuWithCheckboxes />
46      <ContextMenuWithRadio />
47      <ContextMenuWithDestructive />
48      <ContextMenuInDialog />
49    </ExampleWrapper>
50  )
51}
52 
53function ContextMenuBasic() {
54  return (
55    <Example title="Basic">
56      <ContextMenu>
57        <ContextMenuTrigger className="flex aspect-[2/0.5] w-full items-center justify-center rounded-lg border text-sm">
58          Right click here
59        </ContextMenuTrigger>
60        <ContextMenuContent>
61          <ContextMenuGroup>
62            <ContextMenuItem>Back</ContextMenuItem>
63            <ContextMenuItem disabled>Forward</ContextMenuItem>
64            <ContextMenuItem>Reload</ContextMenuItem>
65          </ContextMenuGroup>
66        </ContextMenuContent>
67      </ContextMenu>
68    </Example>
69  )
70}
71 
72function ContextMenuWithIcons() {
73  return (
74    <Example title="With Icons">
75      <ContextMenu>
76        <ContextMenuTrigger className="flex aspect-[2/0.5] w-full items-center justify-center rounded-lg border text-sm">
77          Right click here
78        </ContextMenuTrigger>
79        <ContextMenuContent>
80          <ContextMenuGroup>
81            <ContextMenuItem>
82              <IconPlaceholder
83                lucide="CopyIcon"
84                tabler="IconCopy"
85                hugeicons="CopyIcon"
86                phosphor="CopyIcon"
87              />
88              Copy
89            </ContextMenuItem>
90            <ContextMenuItem>
91              <IconPlaceholder
92// … truncated