Settings

import { Settings } from '@hanzo/ui/settings'

export function Default() {
  const [active, setActive] = useState('general')
  const entry = ENTRIES.find((e) => e.id === active)!
  return (
    <XStack height={480} width="100%" borderWidth={1} borderColor="$borderColor">
      <Settings entries={ENTRIES} groups={['Settings', 'Code', 'Organization']} active={active} onPick={setActive}>
        <Heading title={entry.label} />
        <Soft>Sign in to see your settings.</Soft>
      </Settings>
    </XStack>
  )
}

Types

export interface Entry {
  id: string
  label: string
  /** The group it is listed under. */
  group: string
}

export interface SettingsProps<E extends Entry = Entry> extends Row {
  /** Every section, in the order the page lists them. */
  entries: readonly E[]
  /** The groups, in order. Omitted, they are the entries' own, in first-seen order. */
  groups?: readonly string[]
  /** The open section's id. */
  active: E['id']
  onPick: (id: E['id']) => void
  /** The page's name — the nav's heading and its landmark name. */
  title?: string
  /** The open section. */
  children?: ReactNode
}

Exports