Choice

import { ModeSelect, PageSelect } from '@hanzo/ui/agents'

export function Mode() {
  const [mode, setMode] = useState('build')
  return <ModeSelect modes={MODES} value={mode} onChange={setMode} />
}

export function Page() {
  const [page, setPage] = useState('/')
  return (
    <PageSelect
      pages={[
        { id: '/', label: 'Homepage' },
        { id: '/about', label: 'About' },
        { id: '/pricing', label: 'Pricing' },
      ]}
      value={page}
      onChange={setPage}
    />
  )
}

Types

export interface Option {
  id: string
  label: string
  /** A second line in the menu: what choosing this does. */
  hint?: string
  icon?: ReactNode
}

export interface ModeSelectProps extends Chosen, Trigger {
  modes: readonly Option[]
  /** The control's accessible name. Defaults to "Mode". */
  label?: string
}

export interface PageSelectProps extends Chosen, Trigger {
  pages: readonly Option[]
  /** The control's accessible name. Defaults to "Page". */
  label?: string
}

Exports