ContainerWidgets

Site Overview → Container Widgets: the read-only grid of per-container summary cards. Purely presentational — the shell page feeds it the shaped `containers`…

Site Overview → Container Widgets: the read-only grid of per-container summary cards. Purely presentational — the shell page feeds it the shaped containers array (from the container-widgets data hook) and handles navigation via onContainerClick.

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

Prop	Status	Type	Default	Description
`containers`	Required	`ContainerWidgetItem[]`	—	Card-ready data for every container, shaped by the data hook.
`title`	Optional	`string \| undefined`	—	Section heading.
`isLoading`	Optional	`boolean \| undefined`	—	Shows a spinner while the first load is in flight.
`errorMessage`	Optional	`string \| undefined`	—	Error message shown in place of the grid.
`onContainerClick`	Optional	`((id: string) => void) \| undefined`	—	Invoked with the container id when a card is clicked.
`className`	Optional	`string \| undefined`	—	—

Usage

Notes

The grid is presentational: it does not fetch data. Wire it in the shell page to the container-widgets read hook (react-adapter) which supplies the shaped containers array, isLoading, and any errorMessage.
Empty and error states render an EmptyState; the first load renders a Spinner.

Example

/** * Runnable example for the ContainerWidgets feature. */import { ContainerWidgets } from "@tetherto/mdk-react-devkit"import type { ContainerWidgetItem } from "@tetherto/mdk-react-devkit"const containers: ContainerWidgetItem[] = [  {    id: "container-a",    title: "Container A",    power: 412_000,    powerUnit: "kW",    summary: [      { label: "Hash Rate", value: "1.24 PH/s" },      { label: "Max Temp", value: "72 °C" },      { label: "Avg Temp", value: "65 °C" },    ],    activity: { total: 210, online: 200, offline: 10 },  },  {    id: "container-b",    title: "Container B",    isOffline: true,    summary: [],  },]export const ContainerWidgetsExample = () => (  <ContainerWidgets containers={containers} />)