# Uptime Card

Daily status bars per service. Hover shows a day's story and a click pins it.

Tier: Free

## Installation

```bash
npx shadcn add @fetaui/uptime-card
```

## Usage

```tsx
import { UptimeCard } from '@/components/fetaui/uptime-card'

const services = [
  { name: 'API', uptime: '99.98%', incidents: [{ daysAgo: 43, status: 'degraded', title: 'API degraded for 14 min', detail: 'elevated latency in us-east' }] },
  { name: 'Dashboard', uptime: '100.00%' },
]

export function Example() {
  return <UptimeCard services={services} />
}
```

## API

| Prop | Type | Default |
|---|---|---|
| services | { name, uptime, incidents? }[] | required |
| title | ReactNode | System status |
| days | number | 90 |
| today | Date | now |
| active | { service, daysAgo } or null |  |
| pinned | { service, daysAgo } or null |  |
| defaultPinned | { service, daysAgo } or null | null |
| onPinnedChange | (day) => void |  |
| locale | string | en-US |
| animated | boolean | true |

## When to use

- On a status page or an operations dashboard.
- When people need to find what happened on a given day.

## When not to use

- For one live status: use Badge.
- For a metric over time: use Metric Card.

## Accessibility

- Every day is a button named with the service, date and status.
- Incidents are named in text as well as colour, and the badge has a glyph per status.
- Hover and focus show the same story.

## Motion

- The hovered bar turns ink and grows to 1.15 in height over 150 ms.
- The story fades in above the bars.
- A pin lifts the story from the tray to an inset chip in 200 ms.
- With reduced motion, colours change at once and bars keep their height.