TimelineSelector

Dropdown for picking the dashboard time range. Wraps `core/Select` and the canonical option list from `getTimelineOptions`. Pair with the `useDashboardTimeRa…

Dropdown for picking the dashboard time range. Wraps core/Select and the canonical option list from getTimelineOptions. Pair with the useDashboardTimeRange hook in @tetherto/mdk-react-adapter.

import { TimelineSelector } from "@tetherto/mdk-react-devkit";

Prop	Status	Type	Default	Description
`value`	Required	`string`	—	Currently selected timeline value (e.g. `'1m'`, `'5m'`).
`onChange`	Required	`(next: string) => void`	—	Called whenever the user picks a new option.
`options`	Optional	`TimelineOption[] \| undefined`	—	Available options — defaults to {@link getTimelineOptions}. Pass a custom list to localise labels or restrict the range.
`label`	Optional	`string \| undefined`	—	ARIA label / placeholder for the trigger.
`className`	Optional	`string \| undefined`	—	Tailwind/BEM class hook on the trigger.

Usage

Dropdown for picking the dashboard time range — wraps core/Select with the canonical option list from getTimelineOptions. Pair with useDashboardTimeRange from @tetherto/mdk-react-adapter to drive the hashrate / consumption / power-mode chart hooks.

Example

/** * Runnable example for TimelineSelector. * * Controlled component — owns its `value` and reacts to `onChange`. Pair * with `useDashboardTimeRange` from `@tetherto/mdk-react-adapter` in a * real dashboard. */import { TimelineSelector } from '@tetherto/mdk-react-devkit'import { useState } from 'react'export const TimelineSelectorExample = () => {  const [value, setValue] = useState('5m')  return <TimelineSelector value={value} onChange={setValue} />}