Card
Card containers and card-based layouts
Card components for grouping and presenting content.
Prerequisites
- Complete the installation
- Add the dependency to your app's
package.json
{
"dependencies": {
"@tetherto/mdk-react-devkit": "*",
"@tetherto/mdk-react-adapter": "*",
"@tetherto/mdk-ui-foundation": "*"
}
}Run npm install from the mdk/ui workspace root after your app is under apps/ so npm links workspace packages.
- Import styles:
import '@tetherto/mdk-react-devkit/styles.css'
Components
@tetherto/mdk-react-devkit
Import the public APIs on this page from @tetherto/mdk-react-devkit.
ActiveIncidentsCard
Summary card displaying a list of active incidents/alerts with severity indicators, loading skeleton, and empty state. Rows are virtualized via @tanstack/react-virtual so the card stays responsive with thousands of incidents.
agent-ready
Props
| Prop | Type | Required | Default | Description |
|---|---|---|---|---|
label | string | - | - | |
isLoading | boolean | - | - | |
className | string | - | - | |
skeletonRows | number | - | - | |
emptyMessage | string | - | - | |
items | TIncidentRowProps[] | - | - | |
onItemClick | (id: string) => void | - | - |
CabinetDetailCard
Read-only LV cabinet detail: powermeter readings, the root plus per-position temperature readings (severity-coloured, with an offline marker), and the active-warnings timeline. Presentational — shape the rows with useCabinetDetail.
advanced
Props
| Prop | Type | Required | Default | Description |
|---|---|---|---|---|
title | string | ✓ | - | Cabinet display title (LV Cabinet 1 / transformer title). |
powerMeters | CabinetReadingRow[] | ✓ | - | Non-root powermeter reading rows. |
rootTempSensor | CabinetReadingRow | undefined | - | The cabinet-root temperature reading, when present. | |
tempSensors | CabinetReadingRow[] | ✓ | - | Non-root temperature sensor reading rows. |
alarmsDataItems | TimelineItemData[] | ✓ | - | Active-warnings timeline items. |
onNavigate | ((path: string) => void) | undefined | - | Router navigate used by warning rows to deep-link into the alert. | |
isLoading | boolean | undefined | - | Shows a spinner while the cabinet snapshot is loading. |
MetricCard
Compact card displaying a labelled metric value with optional highlight and transparency states.
agent-ready
Props
| Prop | Type | Required | Default | Description |
|---|---|---|---|---|
label | string | ✓ | - | - |
unit | string | ✓ | - | - |
value | string | number | null | ✓ | - | - |
bgColor | string | undefined | ✓ | - | - |
className | string | undefined | ✓ | - | - |
noMinWidth | boolean | undefined | ✓ | - | - |
isValueMedium | boolean | undefined | ✓ | - | - |
isHighlighted | boolean | undefined | ✓ | - | - |
showDashForZero | boolean | undefined | ✓ | - | - |
isTransparentColor | boolean | undefined | ✓ | - | - |
MiningPoolsPanel
Dashboard card that lists configured mining pools — one row per pool, with revenue, hash rate, and an optional "Show details" action.
Pure presentation: the row data + click handler come from props, shaped upstream by usePoolRows (or any caller producing MiningPoolRows).
agent-ready
Props
| Prop | Type | Required | Default | Description |
|---|---|---|---|---|
label | string | - | Override the card title — defaults to Mining Pools. | |
hideHeader | boolean | - | Hide the title row entirely. | |
isLoading | boolean | - | Loading state — renders skeleton rows. | |
skeletonRows | number | - | Number of skeleton rows to show while loading. | |
emptyMessage | string | - | Message shown when rows is empty. | |
rows | MiningPoolRow[] | - | Pool rows, in display order. | |
onShowDetails | (row: MiningPoolRow) => void | - | Called when the user clicks the per-row "Show details" button. | |
className | string | - | Extra className for the root. |
PoolDetailsCard
Compact key/value card for displaying pool metadata (URL, fee, worker count, etc.). Empty list renders a "No data available" placeholder.
agent-ready
Props
| Prop | Type | Required | Default | Description |
|---|---|---|---|---|
label | string | undefined | ✓ | - | - |
underline | boolean | undefined | ✓ | - | - |
className | string | undefined | ✓ | - | - |
details | PoolDetailItem[] | ✓ | - | - |
PoolDetailsPopover
Button-triggered popover that displays a pool's key/value details (URL, fee, worker count, status, …) inside a Radix Dialog. Wraps PoolDetailsCard so the read-out matches the embedded card variant.
agent-ready
Props
| Prop | Type | Required | Default | Description |
|---|---|---|---|---|
title | string | undefined | ✓ | - | - |
description | string | undefined | ✓ | - | - |
disabled | boolean | undefined | ✓ | - | - |
className | string | undefined | ✓ | - | - |
triggerLabel | string | undefined | ✓ | - | - |
details | PoolDetailItem[] | ✓ | - | - |