CwSensorCard

A sensor device card showing status, primary/secondary readings, and expandable detail rows. Supports single device (via props), multiple devices (via devices array), or no devices (empty state).

Interactive demo (single device)

Click the chevron on each device to expand/collapse independently. State is persisted to localStorage.

Greenhouse A
CW-SS-TMEPNCO2-18
-22.93 °C
79.61 %
All online — green dot
Research Lab
CW-Temp-01
21.50 °C
58.20 %
CW-Temp-02
19.80 °C
62.10 %
Mixed online + offline — yellow (warning) dot
Soil Station Array
CW-Soil-A1
14.30 °C
38.90 %
CW-Soil-A2
1,525.10 °C
41.20 %
CW-Soil-A3
13.70 °C
44.50 %
All offline — red dot
Warehouse B (down)
CW-Down-01
0.00 °C
CW-Down-02
0.00 °C
All loading — blue dot
Provisioning Bay
CW-New-01
0.00 °C
CW-New-02
0.00 °C
One device (offline) — red dot
Cold Storage Unit
CW-Freeze-007
-40.12 °C
95.00 %
No devices — empty dot (no indicator)
New Location (unassigned)
No devices assigned
All statuses (collapsed)
Field Station 1
CW-Sensor-001
24.50 °C
65.20 %
Warehouse B
CW-Sensor-042
-5.10 °C
88.00 %
Rooftop Array
CW-Sensor-077
0.00 °C
0.00 %
Lab Freezer
CW-Sensor-099
-18.25 °C
72.40 %
Single device (props shorthand) Copy code 
<CwSensorCard
	title="Greenhouse A"
	deviceLabel="CW-SS-TMEPNCO2-18"
	status="online"
	primaryValue={-22.93}
	primaryUnit="°C"
	secondaryValue={79.61}
	secondaryUnit="%"
	lastUpdated={new Date(Date.now() - 120_000)}
	expectedUpdateAfterMinutes={10}
	onTimerExpired={(label) => console.log('overdue:', label)}
/>
Multiple devices (devices array) Copy code 
<CwSensorCard
	title="Research Lab"
	status="online"
	onTimerExpired={(label) => console.log('overdue:', label)}
	devices={[
		{ label: "CW-Temp-01", primaryValue: 21.5, lastUpdated: new Date(), expectedUpdateAfterMinutes: 10 },
		{ label: "CW-Temp-02", primaryValue: 19.8, lastUpdated: new Date() },
	]}
/>