Context Menu in five frameworks

import { ContextMenu } from '@hamur/react/context-menu'

const areaStyle = {
  padding: '32px 48px',
  border: '1px dashed var(--demo-border)',
  borderRadius: 12,
  color: 'var(--demo-muted)',
  fontSize: 14,
  userSelect: 'none',
  WebkitUserSelect: 'none',
} as const

export default function ContextMenuExample() {
  return (
    <ContextMenu.Root>
      <ContextMenu.Trigger style={areaStyle}>
        Right click here
      </ContextMenu.Trigger>
      <ContextMenu.Portal>
        <ContextMenu.Positioner>
          <ContextMenu.Popup className="menu">
            <ContextMenu.Item className="menu-item">
              Back
            </ContextMenu.Item>
            <ContextMenu.Item className="menu-item">
              Forward
            </ContextMenu.Item>
            <ContextMenu.Item className="menu-item">
              Reload
            </ContextMenu.Item>
            <ContextMenu.Item className="menu-item">
              Save as...
            </ContextMenu.Item>
          </ContextMenu.Popup>
        </ContextMenu.Positioner>
      </ContextMenu.Portal>
    </ContextMenu.Root>
  )
}