Menu

import { useState } from "react";
import {
  Button,
  Menu,
  MenuItem,
  MenuSection,
  MenuSectionLabel,
  MenuTrigger,
} from "@nexera-ui/react";
import { LuChevronDown } from "react-icons/lu";

export function SectionsAndSelection() {
  function Example() {
    const [sort, setSort] = useState<"name" | "date" | "size">("name");
    return (
      <MenuTrigger>
        <Button variant="secondary" trailingIcon={<LuChevronDown />}>
          Sort
        </Button>
        <Menu
          selectionMode="single"
          selectedKeys={[sort]}
          onSelectionChange={(keys) => {
            const [key] = keys === "all" ? [] : [...keys];
            if (key === "name" || key === "date" || key === "size") setSort(key);
          }}
        >
          <MenuSection>
            <MenuSectionLabel label="Sort by" />
            <MenuItem id="name" label="Name" />
            <MenuItem id="date" label="Date modified" />
            <MenuItem id="size" label="Size" />
          </MenuSection>
        </Menu>
      </MenuTrigger>
    );
  }
  return <Example />;
}

import { useState } from "react";
import { Button, Menu, MenuDivider, MenuItem, SubmenuTrigger } from "@nexera-ui/react";
import { LuCopy, LuDownload, LuLink, LuMail, LuPencil, LuTrash2, LuUsers } from "react-icons/lu";

function FigmaItems() {
  return (
    <>
      <MenuItem id="edit" label="Edit" icon={<LuPencil />} shortcut="E" />
      <MenuItem id="duplicate" label="Duplicate" icon={<LuCopy />} shortcut="D" />
      <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 Controlled() {
  function Example() {
    const [open, setOpen] = useState(false);
    return (
      <div className="flex items-center gap-4">
        <Menu
          trigger={<Button variant="secondary">Actions</Button>}
          isOpen={open}
          onOpenChange={setOpen}
        >
          <FigmaItems />
        </Menu>
        <span className="text-body-small text-secondary">{open ? "Open" : "Closed"}</span>
      </div>
    );
  }
  return <Example />;
}

import { Button, Menu, MenuItem } from "@nexera-ui/react";

export function LongMenu() {
  return (
    <Menu trigger={<Button variant="secondary">Country</Button>}>
      {Array.from({ length: 40 }, (_, index) => (
        <MenuItem key={index} id={`c${String(index)}`} label={`Country ${String(index + 1)}`} />
      ))}
    </Menu>
  );
}

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

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

export function Platforms() {
  return (
    <div className="flex flex-wrap items-center gap-4">
      {platforms.map((platform) => (
        <Menu
          key={platform}
          platform={platform}
          trigger={<Button variant="secondary">{`Open ${platform} menu`}</Button>}
        >
          <MenuItem id="share" label="Share" icon={<LuShare2 />} />
          <MenuItem id="copy" label="Copy" icon={<LuCopy />} />
          <MenuDivider />
          <MenuItem id="delete" label="Delete" type="destructive" icon={<LuTrash2 />} />
        </Menu>
      ))}
    </div>
  );
}