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 "".

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 "".

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".

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.