ContainerFanLegend
Legend strip describing fan states and colours used by the container fans visualisation. Displays a single fan status with number and icon.
Legend strip describing fan states and colours used by the container fans visualisation.
Displays a single fan status with number and icon.
import { ContainerFanLegend } from "@tetherto/mdk-react-devkit";| Prop | Status | Type | Default | Description |
|---|---|---|---|---|
index | Optional | number | null | undefined | — | Fan index/number to display |
enabled | Optional | boolean | undefined | — | Whether the fan is enabled/running |
className | Optional | string | undefined | — | Custom className |
Usage
ContainerFansCard renders a grid of fan status items for a container. ContainerFanLegend is the individual fan strip showing fan number and on/off icon.
ContainerFansCard Props
| Prop | Type | Required | Default | Description |
|---|---|---|---|---|
fansData | { enabled?: boolean; index: number }[] | no | — | Array of fan state objects. Returns null when empty or absent. |
ContainerFanLegend Props
| Prop | Type | Required | Default | Description |
|---|---|---|---|---|
index | number | null | no | — | Fan number displayed as a label. |
enabled | boolean | no | false | Running state; controls icon and colour class. |
className | string | no | — | Additional CSS class. |
Minimal example
import { ContainerFansCard, ContainerFanLegend } from "@tetherto/mdk-react-devkit";
<ContainerFansCard fansData={[{ enabled: true, index: 0 }, { enabled: false, index: 1 }]} />
<ContainerFanLegend index={1} enabled={true} />
Examples
import { ContainerFansCard } from '@tetherto/mdk-react-devkit'export const ContainerFansCardExample = () => ( <div className="mdk-example-row"> <ContainerFansCard fansData={[ { enabled: true, index: 0 }, { enabled: false, index: 1 }, { enabled: true, index: 2 }, ]} /> </div>)import { ContainerFanLegend } from '@tetherto/mdk-react-devkit'export const ContainerFanLegendExample = () => ( <div className="mdk-example-row"> <ContainerFanLegend index={1} enabled={true} /> <ContainerFanLegend index={2} enabled={false} /> </div>)