# `PhoenixKitWeb.Components.Core.TimeDisplay`
[🔗](https://github.com/BeamLabEU/phoenix_kit/blob/v1.7.165/lib/phoenix_kit_web/components/core/time_display.ex#L1)

Provides time and date display components with relative and absolute formatting.

These components handle time formatting consistently across the application,
including relative time displays ("5m ago"), age badges with color coding,
and expiration date formatting.

# `age_badge`

Displays age badge with color coding based on age in days.

Color coding:
- Green (success): Today (< 1 day)
- Blue (info): Recent (< 7 days)
- Yellow (warning): Week+ (< 30 days)
- Red (error): Month+ (>= 30 days)

## Attributes
- `days` - Number of days (integer)
- `class` - Additional CSS classes

## Examples

    <.age_badge days={session.age_in_days} />
    <.age_badge days={0} />  # Shows "Today" in green
    <.age_badge days={45} class="ml-2" />  # Shows "45d" in red

## Attributes

* `days` (`:integer`) (required)
* `class` (`:string`) - Defaults to `""`.

# `duration_display`

Displays formatted duration between two DateTime values.

Formats duration in human-readable format with appropriate units:
- Less than 1 minute: "45s"
- Less than 1 hour: "5m 30s"
- 1 hour or more: "2h 15m"

## Attributes
- `start_time` - Start DateTime
- `end_time` - End DateTime
- `class` - CSS classes

## Examples

    <.duration_display start_time={@log.queued_at} end_time={@log.sent_at} />
    <%!-- Shows: "3m 45s" --%>

    <.duration_display
      start_time={@log.sent_at}
      end_time={@log.delivered_at}
      class="text-sm font-mono"
    />
    <%!-- Shows: "125s" --%>

## Attributes

* `start_time` (`:any`) (required)
* `end_time` (`:any`) (required)
* `class` (`:string`) - Defaults to `""`.

# `expiration_date`

Displays expiration date with formatting.

## Attributes
- `date` - DateTime or nil
- `class` - CSS classes

## Examples

    <.expiration_date date={code.expiration_date} />
    <.expiration_date date={nil} />  # Shows "No expiration"

## Attributes

* `date` (`:any`) - Defaults to `nil`.
* `class` (`:string`) - Defaults to `"text-sm"`.

# `time_ago`

Displays relative time (e.g., "5m ago", "2h ago", "3d ago").

Uses a client-side JavaScript hook for efficient updates without server load.
Updates every second for recent times, less frequently for older times.

## Attributes
- `datetime` - DateTime struct or nil
- `class` - CSS classes (default: "text-xs")

## Examples

    <.time_ago datetime={session.connected_at} />
    <.time_ago datetime={user.last_seen} class="text-sm text-gray-500" />
    <.time_ago datetime={nil} />  # Shows "—"
    <.time_ago datetime={request.inserted_at} id="request-time-123" />

## Attributes

* `datetime` (`:any`) (required)
* `class` (`:string`) - Defaults to `"text-xs"`.
* `id` (`:string`) - Optional DOM id (auto-generated if not provided). Defaults to `nil`.

---

*Consult [api-reference.md](api-reference.md) for complete listing*