Review
Hive health chips on the live apiary yard board
Commercial apiary yard board needs at-a-glance hive health so morning techs know which boxes to open first. Pulls tone tokens from the inspection feed (emerald / amber / rose) and renders compact status chips with Tailwind utility colors instead of the old gray badges.
ReactTier 1tailwindcsspurge
Click a line to flag it, pick one or more labels, then submit. If the change looks correct, approve it.
components/apiary/HiveHealthChip.tsx+9-7
| 8 | 8 | export type HiveTone = "emerald" | "amber" | "rose"; | |
| 9 | 9 | ||
| 10 | 10 | type HiveHealthChipProps = { | |
| 11 | 11 | tone: HiveTone; | |
| 12 | 12 | label: string; | |
| 13 | 13 | }; | |
| 14 | 14 | ||
| 15 | - | export function HiveHealthChip({ label }: { label: string }) { | |
| 16 | - | return ( | |
| 17 | - | <span className="inline-flex rounded-full bg-slate-200 px-2 py-0.5 text-xs font-medium text-slate-700"> | |
| 18 | - | {label} | |
| 19 | - | </span> | |
| 20 | - | ); | |
| 21 | - | } | |
| 15 | + | export function HiveHealthChip({ tone, label }: HiveHealthChipProps) { | |
| 16 | + | return ( | |
| 17 | + | <span | |
| 18 | + | className={`inline-flex rounded-full px-2 py-0.5 text-xs font-medium text-white bg-${tone}-500`} | |
| 19 | + | > | |
| 20 | + | {label} | |
| 21 | + | </span> | |
| 22 | + | ); | |
| 23 | + | } |