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 | Status | Type / Options | Default | Description |
|---|---|---|---|---|
className | Optional | string | - | Additional class names appended to the root |
emptyMessage | Optional | string | - | Message rendered when no items |
isLoading | Optional | boolean | false | Show skeleton rows instead of items |
items | Optional | TIncidentRowProps[] | [] | Incident rows to render |
label | Optional | string | "Active Alerts" | Header label shown above the list |
onItemClick | Optional | (id: string) => void | - | Called with the incident id when a row is clicked |
skeletonRows | Optional | number | 4 | Number of skeleton rows shown when isLoading |
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 | Status | Type / Options | Default | Description |
|---|---|---|---|---|
alarmsDataItems | Required | TimelineItemData[] | - | Active-warnings timeline items |
powerMeters | Required | CabinetReadingRow[] | - | Non-root powermeter reading rows |
tempSensors | Required | CabinetReadingRow[] | - | Non-root temperature sensor reading rows |
title | Required | string | - | Cabinet display title (LV Cabinet 1 / transformer title) |
isLoading | Optional | boolean | - | Shows a spinner while the cabinet snapshot is loading |
onNavigate | Optional | ((path: string) => void) | - | Router navigate used by warning rows to deep-link into the alert |
rootTempSensor | Optional | CabinetReadingRow | - | The cabinet-root temperature reading, when present |
MetricCard
Compact card displaying a labelled metric value with optional highlight and transparency states
agent-ready
Props
| Prop | Status | Type / Options | Default | Description |
|---|---|---|---|---|
label | Required | string | - | Text label shown above the value |
unit | Required | string | - | Unit suffix appended after the value (e.g. "TH/s", "W", "USD") |
value | Required | string | number | null | - | Metric value to display |
bgColor | Optional | string | BLACK_ALPHA_05 | Custom background color (CSS color string) |
className | Optional | string | - | Additional class names appended to the root element |
isHighlighted | Optional | boolean | false | Renders the value in orange to draw attention |
isTransparentColor | Optional | boolean | false | Renders the value in a low-opacity white for de-emphasized display |
isValueMedium | Optional | boolean | false | Applies a medium-weight variant to the value typography |
noMinWidth | Optional | boolean | false | Removes the default minimum width so the card shrinks to content |
showDashForZero | Optional | boolean | false | Displays — instead of 0 when value is zero |
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 | Status | Type / Options | Default | Description |
|---|---|---|---|---|
className | Optional | string | - | Extra className for the root |
emptyMessage | Optional | string | "No pools configured" | Message shown when rows is empty |
hideHeader | Optional | boolean | false | Hide the title row entirely |
isLoading | Optional | boolean | false | Loading state — renders skeleton rows |
label | Optional | string | "Mining Pools" | Override the card title — defaults to Mining Pools |
onShowDetails | Optional | (row: MiningPoolRow) => void | - | Called when the user clicks the per-row "Show details" button |
rows | Optional | MiningPoolRow[] | [] | Pool rows, in display order |
skeletonRows | Optional | number | 3 | Number of skeleton rows to show while loading |
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 | Status | Type / Options | Default | Description |
|---|---|---|---|---|
details | Required | PoolDetailItem[] | - | Detail rows to render |
className | Optional | string | - | Additional class names |
label | Optional | string | - | Header label |
underline | Optional | boolean | false | Render an underline under the label |
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 | Status | Type / Options | Default | Description |
|---|---|---|---|---|
details | Required | PoolDetailItem[] | - | Detail rows |
className | Optional | string | - | Additional class names |
description | Optional | string | - | Dialog body description |
disabled | Optional | boolean | false | Disable the trigger |
title | Optional | string | - | Dialog title |
triggerLabel | Optional | string | - | Trigger button label |