<!-- source-hash: 4f6de0d7bd5f42eb6b6564ff3beaa57b -->
A reusable React component that displays color-coded status indicators with optional links, supporting success, pending, error, and missing states.

## Key Components

- **StatusIndicator**: Main functional component that renders a colored dot with status text
- **StatusIndicatorProps**: TypeScript interface defining component props
- **getStatusColor**: Internal utility function that maps status types to corresponding Tailwind CSS classes

## Usage Example

```typescript
import { StatusIndicator } from './status-indicator';

// Basic status display
<StatusIndicator status="success" label="Database Connected" />

// Status with clickable link
<StatusIndicator 
  status="error" 
  label="API Unreachable" 
  href="https://status.api.example.com" 
/>

// Different status states
<StatusIndicator status="pending" label="Deployment in Progress" />
<StatusIndicator status="missing" label="Configuration Required" />
```

The component automatically applies appropriate colors:
- **Success**: Green dot and text
- **Pending/Missing**: Orange dot and text  
- **Error**: Red dot and text

When an `href` prop is provided, the entire indicator becomes a clickable link that opens in a new tab. The component uses DM Sans font and includes hover effects for linked indicators.