Menu

import { CopySimpleIcon, DotsThreeIcon, FolderIcon, PencilSimpleIcon, TrashIcon } from '@phosphor-icons/react';
import { Button, Menu, MenuItem, MenuSeparator, MenuTrigger, SubmenuTrigger } from '@arbol-ai/ui';

<MenuTrigger>
  <Button aria-label="Campaign actions" size="icon" variant="ghost">
    <DotsThreeIcon weight="bold" />
  </Button>
  <Menu placement="bottom end">
    <MenuItem icon={<PencilSimpleIcon />} shortcut="E">
      Edit
    </MenuItem>
    <MenuItem description="Same audience and message" icon={<CopySimpleIcon />}>
      Duplicate
    </MenuItem>
    <SubmenuTrigger>
      <MenuItem icon={<FolderIcon />}>Move to</MenuItem>
      <Menu>
        <MenuItem>Reminders</MenuItem>
        <MenuItem>Follow-ups</MenuItem>
      </Menu>
    </SubmenuTrigger>
    <MenuSeparator />
    <MenuItem icon={<TrashIcon />} variant="destructive">
      Delete
    </MenuItem>
  </Menu>
</MenuTrigger>

import { useState } from 'react';
import type { Selection } from 'react-aria-components';
import { Button, Menu, MenuHeader, MenuItem, MenuSection, MenuTrigger } from '@arbol-ai/ui';

const ViewMenuExample = () => {
  const [sort, setSort] = useState<Selection>(new Set(['recent']));
  const [columns, setColumns] = useState<Selection>(new Set(['phone', 'agent']));
  return (
    <MenuTrigger>
      <Button variant="outline">View</Button>
      <Menu>
        <MenuSection onSelectionChange={setSort} selectedKeys={sort} selectionMode="single">
          <MenuHeader>Sort by</MenuHeader>
          <MenuItem id="recent">Most recent</MenuItem>
          <MenuItem id="name">Name</MenuItem>
        </MenuSection>
        <MenuSection onSelectionChange={setColumns} selectedKeys={columns} selectionMode="multiple">
          <MenuHeader>Columns</MenuHeader>
          <MenuItem id="phone">Phone</MenuItem>
          <MenuItem id="agent">Agent</MenuItem>
          <MenuItem id="channel">Channel</MenuItem>
        </MenuSection>
      </Menu>
    </MenuTrigger>
  );
};

<ViewMenuExample />