Feature Components
Feature-specific composite components
Composite components for specific application features.
Prerequisites
- Complete the installation
- Import styles:
import '@tetherto/mdk-react-devkit/styles.css'
Components
ContainerDetail
Container detail page shell: a back link, the container name, and a per-model tab strip. Purely presentational — the page resolves the tab list (via the foundation tab matrix), owns the active tab /…
agent-ready
Props
| Prop | Type | Required | Default | Description |
|---|---|---|---|---|
name | React.ReactNode | - | Container display name shown in the header. Optional — omit it when the host already renders the container name as the… | |
tabs | ContainerDetailTab[] | ✓ | - | Ordered tabs for this container model (already resolved by the page). |
activeTab | string | ✓ | - | Currently active tab key. |
onTabChange | (tab: string) => void | ✓ | - | Fired with the next tab key when the operator switches tabs. |
onBack | () => void | ✓ | - | Fired when the back link is clicked (the page decides where to go). |
backLabel | React.ReactNode | - | Back-link label. Defaults to "Explorer". | |
children | React.ReactNode | - | The active tab's body — supplied by the page (real content or a placeholder). | |
className | string | undefined | - | - |
ContainerWidgets
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 ho…
agent-ready
Props
| Prop | Type | Required | Default | Description |
|---|---|---|---|---|
containers | ContainerWidgetItem[] | ✓ | - | Card-ready data for every container, shaped by the data hook. |
title | string | undefined | - | Section heading. | |
isLoading | boolean | undefined | - | Shows a spinner while the first load is in flight. | |
errorMessage | string | undefined | - | Error message shown in place of the grid. | |
onContainerClick | ((id: string) => void) | undefined | - | Invoked with the container id when a card is clicked. | |
className | string | undefined | - | - |
ExplorerLayout
Explorer split-view shell: a header, a scrollable list column, and a sticky detail column that appears when a row is selected (stacking on narrow viewports). Purely presentational — the page supplies…
agent-ready
Props
| Prop | Type | Required | Default | Description |
|---|---|---|---|---|
title | string | undefined | - | Page heading. | |
headerActions | React.ReactNode | - | Optional header controls (export button, etc.) shown next to the title. | |
list | React.ReactNode | ✓ | - | The list column — typically a tab switch plus the device/container table. |
detail | React.ReactNode | - | The detail column content (shown in the sticky panel when hasSelection). | |
hasSelection | boolean | undefined | - | When true the layout splits into list (70%) + a sticky detail column (30%); otherwise the list fills the width. Driven… | |
className | string | undefined | - | - |