Header controls settings

The HeaderControlsSettings component manages header visibility preferences. It provides:

Data (preferences): current visibility state for header items.
Callbacks (onToggle, onReset): handle changes and reset to defaults.
State (isLoading): optional loading feedback.
Styling (className): optional CSS class.

Import

import { HeaderControlsSettings } from '@mdk/foundation'

Props

Prop	Type	Default	Description
`preferences`	`HeaderPreferences`	none	Required: Current header visibility preferences
`onToggle`	function	none	Required: Callback when a toggle changes
`onReset`	function	none	Required: Callback to reset to defaults
`isLoading`	`boolean`	`false`	Loading state
`className`	`string`	none	Additional CSS class

Data structure

The HeaderPreferences type maps header item keys to visibility booleans. See constants for the full list.

import type { HeaderPreferences } from '@mdk/foundation'

type HeaderPreferences = {
  poolMiners: boolean
  mosMiners: boolean
  poolHashrate: boolean
  mosHashrate: boolean
  consumption: boolean
  efficiency: boolean
}

Basic usage

Changes apply instantly via onToggle. The callback receives the preference key and new value:

const handleToggle = (key: keyof HeaderPreferences, value: boolean) => {
  setPreferences(prev => ({ ...prev, [key]: value }))
  api.updateHeaderPreference(key, value)  // persist immediately
}

There is no Save button, each toggle immediately persists via your callback.

Example

import { HeaderControlsSettings, DEFAULT_HEADER_PREFERENCES } from '@mdk/foundation'

function HeaderSettingsSection() {
  const [preferences, setPreferences] = useState<HeaderPreferences>({
    poolMiners: true,
    mosMiners: true,
    poolHashrate: true,
    mosHashrate: false,
    consumption: true,
    efficiency: true,
  })

  const handleToggle = (key: keyof HeaderPreferences, value: boolean) => {
    setPreferences(prev => ({ ...prev, [key]: value }))
    api.updateHeaderPreference(key, value)
  }

  const handleReset = () => {
    setPreferences(DEFAULT_HEADER_PREFERENCES)
    api.resetHeaderPreferences()
  }

  return (
    <HeaderControlsSettings
      preferences={preferences}
      onToggle={handleToggle}
      onReset={handleReset}
    />
  )
}

Features

Table layout

The component renders a table with:

Header Item column: label for the metric
Visibility Toggle column: switch to show/hide

Items are defined by HEADER_ITEMS.

Reset to default

The Reset to Default button calls your onReset callback. You define what "default" means:

import { DEFAULT_HEADER_PREFERENCES } from '@mdk/foundation'

const handleReset = () => {
  setPreferences(DEFAULT_HEADER_PREFERENCES)
  api.resetHeaderPreferences()
}

Loading state

When isLoading is true and no preferences are available, a spinner is shown:

<HeaderControlsSettings
  preferences={null}
  isLoading={true}
  onToggle={handleToggle}
  onReset={handleReset}
/>

Styling

The component uses the .mdk-settings-header-controls CSS class. Key selectors:

.mdk-settings-header-controls__description: Explanatory text
.mdk-settings-header-controls__table: Table container
.mdk-settings-header-controls__table-header: Header row
.mdk-settings-header-controls__table-row: Data rows
.mdk-settings-header-controls__actions: Reset button container

Header controls settings

On this page