Responsive page-level action bar component that renders buttons, split-buttons, icon-only buttons, and dropdown submenus — adapting layout between desktop (inline buttons) and mobile (icon, "…" menu, or fixed bottom bar) based on the selected variant. ## Key Components ### Types - **`PageActionButton`** — Configuration object for a single action. Supports labels, icons, variants, href links, tooltips, submenus (`ActionsMenuItem[]`), and split-button `iconAction`. Key flags: `showOnlyMobile`, `iconOnlyOnDesktop`, `mainDisabled`. - **`PageActionsProps`** — Props for the main `PageActions` export. Accepts `variant`, `actions`, `menuActions`, `selector`, and `className`. ### Exports - **`PageActions`** — Top-level component. Delegates to one of three layout variants based on the `variant` prop. ### Internal Variants | Component | Desktop | Mobile | |---|---|---| | `IconButtonsVariant` (default) | Icon buttons + optional overflow menu | Single icon or "…" dropdown | | `PrimaryButtonsVariant` | Labeled/accent buttons | Fixed bottom bar | | `MenuPrimaryVariant` | "…" menu + accent buttons | "…" dropdown only | ### Internal Helpers - **`renderActionButton`** — Wraps `renderRawActionButton` with an optional tooltip. - **`renderRawActionButton`** — Resolves the correct button type: `SplitButton`, chevron `ActionsMenuDropdown`, icon-only `Button`, or labeled `Button`. - **`actionToMenuItems`** — Converts a `PageActionButton` into `ActionsMenuItem[]` for mobile menus; flattens submenu children with parent label prefixes. - **`MobileBottomActions`** — Fixed `bottom-0` bar for the `primary-buttons` variant. ## Usage Example ```typescript import { PageActions, type PageActionButton } from './page-actions' import { PlusIcon, TrashIcon } from '../icons' const actions: PageActionButton[] = [ { label: 'New Item', icon: , variant: 'accent', onClick: () => console.log('create'), tooltip: 'Create a new item', }, { label: 'Delete', icon: , variant: 'outline', iconOnlyOnDesktop: true, onClick: () => console.log('delete'), }, ] // icon-buttons (default): icon buttons on desktop, "..." menu on mobile // primary-buttons: full buttons on desktop, fixed bottom bar on mobile // menu-primary: overflow menu + accent buttons on desktop, "..." on mobile {} }] }]} selector={} /> ```