A client-side React component that renders a group of selectable section buttons, supporting vertical and wrap layouts with optional icons, badges, numbers, and descriptions. ## Key Components ### Interfaces - **`SectionItem`** — Defines a single section entry with `id`, `title`, optional `subtitle`, `description`, `number`, `leftIcon`, `badge`, `screenshots`, and `disabled` flag. - **`SectionSelectorProps`** — Configuration for the `SectionSelector` component, including layout, width, active state, and callback. ### Components - **`SectionButton`** *(internal)* — Renders an individual section button using the `Button` and `StatusBadge` primitives. Adapts its internal layout based on the `layout` prop (`vertical` vs `wrap`). - **`SectionSelector`** *(exported)* — Orchestrates a list of `SectionButton` components. Manages container layout, button width classes, and delegates click handling via `onSectionChange`. ## Props | Prop | Type | Default | Description | |---|---|---|---| | `sections` | `SectionItem[]` | — | List of section items to render | | `activeSection` | `string` | — | ID of the currently active section | | `onSectionChange` | `(id: string) => void` | — | Callback fired on section click | | `layout` | `'vertical' \| 'wrap'` | `'vertical'` | Button arrangement direction | | `buttonWidth` | `'auto' \| 'full' \| 'responsive'` | `'auto'` | Width behavior of each button | | `showDescription` | `boolean` | `true` | Toggle description text visibility | ## Usage Example ```typescript import { SectionSelector, SectionItem } from './section-selector' const sections: SectionItem[] = [ { id: 'overview', title: 'Overview', description: 'High-level summary', number: '01', badge: { text: 'New', colorScheme: 'cyan' }, }, { id: 'details', title: 'Details', subtitle: 'In-depth configuration', disabled: false, }, ] export function MyPage() { const [active, setActive] = React.useState('overview') return ( ) } ``` **Source:** [`section-selector.tsx`](https://github.com/flamingo-stack/openframe-oss-lib/blob/main/section-selector.tsx)