Context Menu

"use client";

import React from "react";
import { ContextMenu } from "@/ui/components/ContextMenu";
import { Badge } from "@/ui/components/Badge";
import * as SubframeCore from "@subframe/core";
import { Button } from "@/ui/components/Button";

function ContextMenuExample() {
  return (
    <SubframeCore.ContextMenu.Root>
      <SubframeCore.ContextMenu.Trigger asChild={true}>
        <Button onClick={(event: React.MouseEvent<HTMLButtonElement>) => {}}>
          Context Menu Button
        </Button>
      </SubframeCore.ContextMenu.Trigger>
      <SubframeCore.ContextMenu.Portal>
        <SubframeCore.ContextMenu.Content
          side="bottom"
          align="start"
          sideOffset={4}
          asChild={true}
        >
          <ContextMenu>
            <ContextMenu.ContextItem icon="FeatherCheck">
              Enabled
            </ContextMenu.ContextItem>
            <ContextMenu.ContextItem icon="FeatherEyeOff">
              Hide
            </ContextMenu.ContextItem>
            <ContextMenu.ContextItem
              icon={null}
              rightSlot={<Badge variant="neutral">⌘G</Badge>}
            >
              Wrap with stack
            </ContextMenu.ContextItem>
            <ContextMenu.ContextDivider />
            <ContextMenu.ContextItem icon="FeatherComponent">
              Create component
            </ContextMenu.ContextItem>
            <ContextMenu.ContextItem icon={null}>
              View code
            </ContextMenu.ContextItem>
            <ContextMenu.ContextItem
              icon="FeatherCopy"
              rightSlot={<Badge variant="neutral">⌘C</Badge>}
            >
              Copy
            </ContextMenu.ContextItem>
            <ContextMenu.ContextItem
              icon="FeatherTrash"
              rightSlot={<Badge variant="neutral">⌘D</Badge>}
            >
              Delete
            </ContextMenu.ContextItem>
          </ContextMenu>
        </SubframeCore.ContextMenu.Content>
      </SubframeCore.ContextMenu.Portal>
    </SubframeCore.ContextMenu.Root>
  );
}

export default ContextMenuExample;