import {
ContextMenu,
ContextMenuCheckboxItem,
ContextMenuContent,
ContextMenuGroup,
ContextMenuGroupLabel,
ContextMenuItem,
ContextMenuRadioGroup,
ContextMenuRadioItem,
ContextMenuSeparator,
ContextMenuShortcut,
ContextMenuSub,
ContextMenuSubContent,
ContextMenuSubTrigger,
ContextMenuTrigger,
} from '@/registry/default/ui/base-context-menu';
export default function ContextMenuDemo() {
return (
<ContextMenu>
<ContextMenuTrigger className="flex h-[150px] w-[300px] items-center justify-center rounded-md border border-dashed text-sm">
Right click here
</ContextMenuTrigger>
<ContextMenuContent className="w-56">
<ContextMenuItem inset>
New File
<ContextMenuShortcut>⌘N</ContextMenuShortcut>
</ContextMenuItem>
<ContextMenuItem inset>
Open File
<ContextMenuShortcut>⌘O</ContextMenuShortcut>
</ContextMenuItem>
<ContextMenuItem inset disabled>
Save
<ContextMenuShortcut>⌘S</ContextMenuShortcut>
</ContextMenuItem>
<ContextMenuSub>
<ContextMenuSubTrigger inset>Edit</ContextMenuSubTrigger>
<ContextMenuSubContent className="w-48" sideOffset={6}>
<ContextMenuItem>Cut</ContextMenuItem>
<ContextMenuItem>Copy</ContextMenuItem>
<ContextMenuItem>Paste</ContextMenuItem>
<ContextMenuSeparator />
<ContextMenuItem>Find & Replace</ContextMenuItem>
<ContextMenuSeparator />
<ContextMenuItem variant="destructive">Clear All</ContextMenuItem>
</ContextMenuSubContent>
</ContextMenuSub>
<ContextMenuSeparator />
<ContextMenuCheckboxItem defaultChecked>Show Line Numbers</ContextMenuCheckboxItem>
<ContextMenuCheckboxItem>Word Wrap</ContextMenuCheckboxItem>
<ContextMenuSeparator />
<ContextMenuGroup>
<ContextMenuRadioGroup defaultValue="dark">
<ContextMenuGroupLabel inset>Themes</ContextMenuGroupLabel>
<ContextMenuRadioItem value="light">Light Theme</ContextMenuRadioItem>
<ContextMenuRadioItem value="dark">Dark Theme</ContextMenuRadioItem>
<ContextMenuRadioItem value="auto">Auto Theme</ContextMenuRadioItem>
</ContextMenuRadioGroup>
</ContextMenuGroup>
</ContextMenuContent>
</ContextMenu>
);
}