A client-side React component that renders a colored status dot paired with a label, optionally wrapped in an external link. ## Key Components ### `StatusIndicatorProps` | Prop | Type | Required | Description | |------|------|----------|-------------| | `status` | `'success' \| 'pending' \| 'error' \| 'missing'` | ✅ | Determines dot and text color | | `label` | `string` | ✅ | Display text next to the dot | | `href` | `string` | ❌ | If provided, wraps the indicator in an external `` tag | ### `StatusIndicator` Maps each status to ODS design token classes: | Status | Color Token | |--------|-------------| | `success` | `ods-success` (green) | | `pending` | `ods-warning` (yellow) | | `error` | `ods-error` (red) | | `missing` | `ods-warning` (yellow) | ## Usage Example ```typescript // Static status display // Error state // Clickable indicator linking to an external resource // Missing configuration ``` ## Notes - Uses `"use client"` — must run in a browser context (Next.js App Router). - The `href` variant opens in a new tab with `rel="noopener noreferrer"` for security. - Color tokens (`ods-success`, `ods-warning`, `ods-error`) are defined in the ODS (OpenFrame Design System) Tailwind config. Ensure the theme is loaded in your Tailwind setup.