Context Menu

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

const LogoVercelCircle = () => (
  <svg height="16" strokeLinejoin="round" viewBox="0 0 16 16" width="16">
    <g clipPath="url(#clip0_872_3186)">
      <circle cx="8" cy="8" r="7.25" strokeWidth="1.5" strokeLinecap="round"
              strokeLinejoin="round" />
      <path fillRule="evenodd" clipRule="evenodd" d="M8 4.5L11.5 10.625H4.5L8 4.5Z" fill="var(--ds-gray-100)" />
    </g>
    <defs>
      <clipPath id="clip0_872_3186">
        <rect width="16" height="16" fill="white"></rect>
      </clipPath>
    </defs>
  </svg>
);

export default function PrefixAndSuffixDemo() {
  return (
        <div className="flex gap-4">
          <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
                href="/"
                prefix={<LogoVercelCircle />}
                value="hello"
              >
                Item one
              </ContextMenu.Item>
              <ContextMenu.Item
                href="/"
                prefix={<LogoVercelCircle />}
                value="hello"
              >
                Item Two
              </ContextMenu.Item>
              <ContextMenu.Item
                href="/"
                prefix={<LogoVercelCircle />}
                value="hello"
              >
                Item Three
              </ContextMenu.Item>
              <ContextMenu.Item
                href="/"
                prefix={<LogoVercelCircle />}
                value="hello"
              >
                Item Four
              </ContextMenu.Item>
            </ContextMenu.Content>
          </ContextMenu>
          <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
                href="/"
                suffix={<LogoVercelCircle />}
                value="hello"
              >
                Item one
              </ContextMenu.Item>
              <ContextMenu.Item
                href="/"
                suffix={<LogoVercelCircle />}
                value="hello"
              >
                Item Two
              </ContextMenu.Item>
              <ContextMenu.Item
                href="/"
                suffix={<LogoVercelCircle />}
                value="hello"
              >
                Item Three
              </ContextMenu.Item>
              <ContextMenu.Item
                href="/"
                suffix={<LogoVercelCircle />}
                value="hello"
              >
                Item Four
              </ContextMenu.Item>
            </ContextMenu.Content>
          </ContextMenu>
        </div>
  );
}