MenuDivider

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

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

function StaticMenu({
  platform: platformProp,
  label,
  children,
}: {
  platform?: Platform | undefined;
  label: string;
  children: ReactNode;
}) {
  const platform = usePlatform(platformProp);
  return (
    <div data-platform={platform} className={menuPopoverStyles({ platform })}>
      <MenuPlatformContext.Provider value={platform}>
        <AriaMenu aria-label={label} className={menuListStyles({ platform })}>
          {children}
        </AriaMenu>
      </MenuPlatformContext.Provider>
    </div>
  );
}

export function Platforms() {
  return (
    <div className="flex flex-wrap items-start gap-6">
      {platforms.map((platform) => (
        <StaticMenu key={platform} label={`File (${platform})`} platform={platform}>
          <MenuItem id="edit" label="Edit" icon={<LuPencil />} />
          <MenuDivider />
          <MenuItem id="delete" label="Delete" type="destructive" icon={<LuTrash2 />} />
        </StaticMenu>
      ))}
    </div>
  );
}

import { MenuDivider } from "@nexera-ui/react";

export function Standalone() {
  return (
    <div className="w-60">
      <MenuDivider />
    </div>
  );
}