PhoenixKitWeb.Components.Core.TimeDisplay (phoenix_kit v1.5.1)

View Source

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.

Summary

Functions

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

Displays formatted duration between two DateTime values.

Displays expiration date with formatting.

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

Functions

age_badge(assigns)

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(assigns)

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(assigns)

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(assigns)

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

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

Attributes

  • datetime (:any) (required)
  • class (:string) - Defaults to "text-xs".