"use client"

import * as React from "react"

import {
  ContextMenu,
  ContextMenuCheckboxItem,
  ContextMenuContent,
  ContextMenuItem,
  ContextMenuSeparator,
  ContextMenuSub,
  ContextMenuSubContent,
  ContextMenuSubTrigger,
  ContextMenuTrigger,
} from "@/registry/ui/context-menu/context-menu"

export default function ContextMenuWithSubmenuDemo() {
  const [ghostEchoes, setGhostEchoes] = React.useState(true)

  return (
    <ContextMenu>
      <ContextMenuTrigger className="flex h-36 w-full max-w-sm items-center justify-center rounded-lg border border-dashed border-border-strong bg-surface-1/60 text-sm text-muted-foreground">
        Right-click the transmission log
      </ContextMenuTrigger>
      <ContextMenuContent>
        <ContextMenuItem>Tail live feed</ContextMenuItem>
        <ContextMenuItem>Bookmark timestamp</ContextMenuItem>
        <ContextMenuSub>
          <ContextMenuSubTrigger>Reroute traffic</ContextMenuSubTrigger>
          <ContextMenuSubContent>
            <ContextMenuItem>KX-7 Northern relay</ContextMenuItem>
            <ContextMenuItem>VD-2 Equator relay</ContextMenuItem>
            <ContextMenuItem>QT-9 Polar relay</ContextMenuItem>
          </ContextMenuSubContent>
        </ContextMenuSub>
        <ContextMenuSeparator />
        <ContextMenuCheckboxItem
          checked={ghostEchoes}
          onCheckedChange={setGhostEchoes}
        >
          Show ghost echoes
        </ContextMenuCheckboxItem>
      </ContextMenuContent>
    </ContextMenu>
  )
}
Draw

Examples
