Context Menu

1"use client"
2 
3import * as React from "react"
4 
5import {
6  Example,
7  ExampleWrapper,
8} from "@/registry/radix-sera/components/example"
9import { Button } from "@/registry/radix-sera/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/radix-sera/ui/context-menu"
26import {
27  Dialog,
28  DialogContent,
29  DialogDescription,
30  DialogHeader,
31  DialogTitle,
32  DialogTrigger,
33} from "@/registry/radix-sera/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      <ContextMenuWithInset />
50    </ExampleWrapper>
51  )
52}
53 
54function ContextMenuBasic() {
55  return (
56    <Example title="Basic">
57      <ContextMenu>
58        <ContextMenuTrigger className="flex aspect-[2/0.5] w-full items-center justify-center rounded-lg border text-sm">
59          Right click here
60        </ContextMenuTrigger>
61        <ContextMenuContent>
62          <ContextMenuGroup>
63            <ContextMenuItem>Back</ContextMenuItem>
64            <ContextMenuItem disabled>Forward</ContextMenuItem>
65            <ContextMenuItem>Reload</ContextMenuItem>
66          </ContextMenuGroup>
67        </ContextMenuContent>
68      </ContextMenu>
69    </Example>
70  )
71}
72 
73function ContextMenuWithIcons() {
74  return (
75    <Example title="With Icons">
76      <ContextMenu>
77        <ContextMenuTrigger className="flex aspect-[2/0.5] w-full items-center justify-center rounded-lg border text-sm">
78          Right click here
79        </ContextMenuTrigger>
80        <ContextMenuContent>
81          <ContextMenuGroup>
82            <ContextMenuItem>
83              <IconPlaceholder
84                lucide="CopyIcon"
85                tabler="IconCopy"
86                hugeicons="CopyIcon"
87                phosphor="CopyIcon"
88                remixicon="RiFileCopyLine"
89              />
90              Copy
91            </ContextMenuItem>
92// … truncated