Context Menu

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

export default function DisabledItemsDemo() {
  return (
        <ContextMenu>
          <ContextMenu.Trigger>
            <div
              style={{
                width: 300,
                padding: "45px 0",
                border: "1px var(--ds-gray-alpha-600) dashed",
                borderRadius: 4,
                textAlign: "center",
                fontSize: 14,
                color: "var(--ds-gray-1000)"
              }}
            >
              Right click here
            </div>
          </ContextMenu.Trigger>
          <ContextMenu.Content>
            <ContextMenu.Item
              onClick={(): void => console.log("value")}
              value="hello"
            >
              Item one
            </ContextMenu.Item>
            <ContextMenu.Item
              disabled
              onClick={(): void => console.log("value")}
              value="hello"
            >
              Item Two
            </ContextMenu.Item>
            <ContextMenu.Item
              disabled
              onClick={(): void => console.log("value")}
              value="hello"
            >
              Item Three
            </ContextMenu.Item>
            <ContextMenu.Item
              onClick={(): void => console.log("value")}
              value="hello"
            >
              Item Four
            </ContextMenu.Item>
          </ContextMenu.Content>
        </ContextMenu>
  );
}