Context Menu

import { ContextMenu } from "@craftdotui/baseui/components/context-menu";

import {
  MenuRoot as ContextMenuRoot,
  MenuItem as ContextMenuItem,
  // ... other menu components
} from "@craftdotui/baseui/components/menu";

<ContextMenuRoot>
  <ContextMenuTrigger>
    <div className="border p-8 text-center">
      Right click here
    </div>
  </ContextMenuTrigger>
  
  <ContextMenuPortal>
    <ContextMenuPositioner>
      <ContextMenuPopup>
        <ContextMenuItem>Copy</ContextMenuItem>
        <ContextMenuItem>Paste</ContextMenuItem>
        <ContextMenuItem>Delete</ContextMenuItem>
      </ContextMenuPopup>
    </ContextMenuPositioner>
  </ContextMenuPortal>
</ContextMenuRoot>

<ContextMenuRoot>
  <ContextMenuTrigger>
    <div className="h-32 w-64 rounded border flex items-center justify-center">
      Right click me
    </div>
  </ContextMenuTrigger>
  
  <ContextMenuPortal>
    <ContextMenuPositioner>
      <ContextMenuPopup>
        <ContextMenuItem>Edit</ContextMenuItem>
        <ContextMenuItem>Duplicate</ContextMenuItem>
        <ContextMenuSeparator />
        <ContextMenuItem>Delete</ContextMenuItem>
      </ContextMenuPopup>
    </ContextMenuPositioner>
  </ContextMenuPortal>
</ContextMenuRoot>

<ContextMenuRoot>
  <ContextMenuTrigger>
    <img src="/image.jpg" alt="Photo" />
  </ContextMenuTrigger>
  
  <ContextMenuPortal>
    <ContextMenuPositioner>
      <ContextMenuPopup>
        <ContextMenuItem>Save Image</ContextMenuItem>
        <ContextMenuItem>Copy Image</ContextMenuItem>
        <ContextMenuItem>Open in New Tab</ContextMenuItem>
      </ContextMenuPopup>
    </ContextMenuPositioner>
  </ContextMenuPortal>
</ContextMenuRoot>