MenuItem

import { type ReactNode } from "react";
import { AriaMenu, type AriaMenuProps } from "react-aria-components";
import {
  MenuDivider,
  MenuItem,
  menuListStyles,
  menuPopoverStyles,
  usePlatform,
} from "@nexera-ui/react";
import { LuCopy, LuPencil, LuShare2, LuTrash2 } from "react-icons/lu";

function StaticMenu({
  platform: platformProp,
  children,
  ...props
}: { platform?: Platform | undefined; children: ReactNode } & Omit<
  AriaMenuProps<object>,
  "children"
>) {
  const platform = usePlatform(platformProp);
  return (
    <div data-platform={platform} className={menuPopoverStyles({ platform })}>
      <MenuPlatformContext.Provider value={platform}>
        <AriaMenu className={menuListStyles({ platform })} {...props}>
          {children}
        </AriaMenu>
      </MenuPlatformContext.Provider>
    </div>
  );
}

export function Types() {
  return (
    <div className="flex flex-wrap items-start gap-6">
      <StaticMenu aria-label="File">
        <MenuItem id="edit" label="Edit" icon={<LuPencil />} shortcut="E" />
        <MenuItem
          id="copy"
          label="Duplicate"
          icon={<LuCopy />}
          description="Changes are saved instantly"
        />
        <MenuItem id="share" label="Share" icon={<LuShare2 />} type="submenu" />
        <MenuItem id="move" label="Move" isDisabled />
        <MenuDivider />
        <MenuItem id="delete" label="Delete" type="destructive" icon={<LuTrash2 />} />
      </StaticMenu>
      <StaticMenu aria-label="View" selectionMode="multiple" defaultSelectedKeys={["grid"]}>
        <MenuItem id="grid" label="Show grid" />
        <MenuItem id="rulers" label="Show rulers" />
        <MenuItem id="guides" label="Show guides" />
      </StaticMenu>
    </div>
  );
}

import { type ReactNode } from "react";
import { AriaMenu, type AriaMenuProps } from "react-aria-components";
import { MenuItem, menuListStyles, menuPopoverStyles, usePlatform } from "@nexera-ui/react";
import { LuCopy, LuShare2, LuTrash2 } from "react-icons/lu";

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

function StaticMenu({
  platform: platformProp,
  children,
  ...props
}: { platform?: Platform | undefined; children: ReactNode } & Omit<
  AriaMenuProps<object>,
  "children"
>) {
  const platform = usePlatform(platformProp);
  return (
    <div data-platform={platform} className={menuPopoverStyles({ platform })}>
      <MenuPlatformContext.Provider value={platform}>
        <AriaMenu className={menuListStyles({ platform })} {...props}>
          {children}
        </AriaMenu>
      </MenuPlatformContext.Provider>
    </div>
  );
}

export function Platforms() {
  return (
    <div className="flex flex-wrap items-start gap-6">
      {platforms.map((platform) => (
        <div key={platform} className="flex flex-col gap-2">
          <span className="text-body-caption text-secondary">{platform}</span>
          <StaticMenu aria-label={`Share (${platform})`} platform={platform}>
            <MenuItem id="share" label="Share" icon={<LuShare2 />} />
            <MenuItem id="copy" label="Copy" icon={<LuCopy />} />
            <MenuItem id="delete" label="Delete" type="destructive" icon={<LuTrash2 />} />
          </StaticMenu>
        </div>
      ))}
    </div>
  );
}

import { type ReactNode } from "react";
import { AriaMenu, type AriaMenuProps } from "react-aria-components";
import { MenuItem, menuListStyles, menuPopoverStyles, usePlatform } from "@nexera-ui/react";
import { LuShare2 } from "react-icons/lu";

function StaticMenu({
  platform: platformProp,
  children,
  ...props
}: { platform?: Platform | undefined; children: ReactNode } & Omit<
  AriaMenuProps<object>,
  "children"
>) {
  const platform = usePlatform(platformProp);
  return (
    <div data-platform={platform} className={menuPopoverStyles({ platform })}>
      <MenuPlatformContext.Provider value={platform}>
        <AriaMenu className={menuListStyles({ platform })} {...props}>
          {children}
        </AriaMenu>
      </MenuPlatformContext.Provider>
    </div>
  );
}

export function LongLabel() {
  return (
    <StaticMenu aria-label="Move">
      <MenuItem
        id="archive"
        label="Move to the archived projects folder of the previous financial year"
        description="Everyone with access to the folder can see it"
        icon={<LuShare2 />}
        shortcut="⌘⇧M"
      />
    </StaticMenu>
  );
}