ContextMenu

'use client'

import {
	ContextMenu,
	ContextMenuCheckboxItem,
	ContextMenuContent,
	ContextMenuGroup,
	ContextMenuGroupLabel,
	ContextMenuItem,
	ContextMenuRadioGroup,
	ContextMenuRadioItem,
	ContextMenuSeparator,
	ContextMenuShortcut,
	ContextMenuSub,
	ContextMenuSubContent,
	ContextMenuSubTrigger,
	ContextMenuTrigger,
} from '@nerdfish/react/context-menu'

export default function ContextMenuExample() {
	return (
		<ContextMenu>
			<ContextMenuTrigger className="flex h-37.5 w-75 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>
	)
}