MinersSummaryBox
Headline card summarising miner counts by state (online, offline, faulted) for one container. Displays mining summary parameters in a 2-column grid layout. A…
Headline card summarising miner counts by state (online, offline, faulted) for one container.
Displays mining summary parameters in a 2-column grid layout. Accepts pre-formatted values - consumers handle data formatting.
import { MinersSummaryBox } from "@tetherto/mdk-react-devkit";| Prop | Status | Type | Default | Description |
|---|---|---|---|---|
params | Required | MinersSummaryParam[] | — | Array of label-value pairs to display in a 2-column grid |
className | Optional | string | undefined | — | Additional CSS class name |
Usage
Headline card that summarises miner statistics (hash rate, efficiency, temperature) for one container in a 2-column grid. Accepts pre-formatted value strings so no numeric formatting is done inside the component.
Minimal example
import { MinersSummaryBox } from "@tetherto/mdk-react-devkit";
<MinersSummaryBox
params={[
{ label: "Hash Rate", value: "1.24 PH/s" },
{ label: "Efficiency", value: "32.5 W/TH/s" },
{ label: "Max Temp", value: "72 °C" },
{ label: "Online", value: "47 / 50" },
]}
/>
Example
import { MinersSummaryBox } from '@tetherto/mdk-react-devkit'export const MinersSummaryBoxExample = () => ( <div className="mdk-example-row"> <MinersSummaryBox params={[ { label: 'Hash Rate', value: '1.24 PH/s' }, { label: 'Efficiency', value: '32.5 W/TH/s' }, { label: 'Max Temp', value: '72 °C' }, { label: 'Online', value: '47 / 50' }, ]} /> </div>)