ContextMenu

import { ContextMenu, MenuDivider, MenuItem, cn } from "@nexera-ui/react";
import { LuDownload, LuMail, LuTrash2, LuUsers } from "react-icons/lu";

const targetClass = cn(
  "box-border inline-flex min-h-20 w-72 max-w-full items-center gap-3 rounded-md border border-default bg-surface p-4 text-body-default text-primary",
  focusRingNative,
);

export function WithHeader() {
  return (
    <ContextMenu
      type="with-header"
      header="3 people selected"
      trigger={
        <div role="button" tabIndex={0} className={targetClass}>
          <LuUsers className="size-5 shrink-0 text-secondary" />3 people selected
        </div>
      }
    >
      <MenuItem id="message" label="Send message" icon={<LuMail />} />
      <MenuItem id="export" label="Export" icon={<LuDownload />} />
      <MenuDivider />
      <MenuItem id="remove" label="Remove from team" type="destructive" icon={<LuTrash2 />} />
    </ContextMenu>
  );
}

import { ContextMenu, Menu, MenuDivider, MenuItem, SubmenuTrigger, cn } from "@nexera-ui/react";
import {
  LuCopy,
  LuDownload,
  LuExternalLink,
  LuFileText,
  LuLink,
  LuMail,
  LuPencil,
  LuShare2,
  LuStar,
  LuTrash2,
  LuUsers,
} from "react-icons/lu";

const quickActions: readonly ContextMenuQuickAction[] = [
  { id: "copy", label: "Copy", icon: <LuCopy /> },
  { id: "share", label: "Share", icon: <LuShare2 /> },
  { id: "star", label: "Star", icon: <LuStar /> },
  { id: "remove", label: "Delete", icon: <LuTrash2 />, type: "destructive" },
];

const targetClass = cn(
  "box-border inline-flex min-h-20 w-72 max-w-full items-center gap-3 rounded-md border border-default bg-surface p-4 text-body-default text-primary",
  focusRingNative,
);

function Items() {
  return (
    <>
      <MenuItem id="open" label="Open" icon={<LuExternalLink />} shortcut="O" />
      <MenuItem id="rename" label="Rename" icon={<LuPencil />} />
      <SubmenuTrigger>
        <MenuItem id="share" label="Share with" icon={<LuUsers />} />
        <Menu>
          <MenuItem id="email" label="Email" icon={<LuMail />} />
          <MenuItem id="link" label="Copy link" icon={<LuLink />} />
        </Menu>
      </SubmenuTrigger>
      <MenuItem id="download" label="Download" icon={<LuDownload />} />
      <MenuDivider />
      <MenuItem id="delete" label="Delete" type="destructive" icon={<LuTrash2 />} />
    </>
  );
}

export function WithQuickActions() {
  return (
    <ContextMenu
      type="with-quick-actions"
      quickActions={quickActions}
      trigger={
        <div role="button" tabIndex={0} className={targetClass}>
          <LuFileText className="size-5 shrink-0 text-secondary" />
          Q3 report.pdf
        </div>
      }
    >
      <Items />
    </ContextMenu>
  );
}

import { ContextMenu, MenuDivider, MenuItem, cn } from "@nexera-ui/react";
import { LuCopy, LuShare2, LuTrash2 } from "react-icons/lu";

const platforms = ["web", "ios", "android"] as const;

const targetClass = cn(
  "box-border inline-flex min-h-20 w-72 max-w-full items-center gap-3 rounded-md border border-default bg-surface p-4 text-body-default text-primary",
  focusRingNative,
);

export function Platforms() {
  return (
    <div className="flex flex-wrap gap-4">
      {platforms.map((platform) => (
        <ContextMenu
          key={platform}
          platform={platform}
          trigger={
            <div role="button" tabIndex={0} className={targetClass}>
              {`Long-press or right-click (${platform})`}
            </div>
          }
        >
          <MenuItem id="share" label="Share" icon={<LuShare2 />} />
          <MenuItem id="copy" label="Copy" icon={<LuCopy />} />
          <MenuDivider />
          <MenuItem id="delete" label="Delete" type="destructive" icon={<LuTrash2 />} />
        </ContextMenu>
      ))}
    </div>
  );
}