Context Menu

"use client";

import React from "react";
import { ContextMenu } from "@/ui/components/ContextMenu";
import { FeatherCheck } from "@subframe/core";
import { FeatherEyeOff } from "@subframe/core";
import { Badge } from "@/ui/components/Badge";
import { FeatherComponent } from "@subframe/core";
import { FeatherCopy } from "@subframe/core";
import { FeatherTrash } from "@subframe/core";
import * as SubframeCore from "@subframe/core";

function ContextMenuExample() {
  return (
    <SubframeCore.ContextMenu.Root>
      <SubframeCore.ContextMenu.Trigger asChild={true}>
        <span className="text-body font-body text-default-font">
          Context Menu Trigger
        </span>
      </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;