PhoenixKitWeb.Components.Core.TimeDisplay (phoenix_kit v1.5.1)
View SourceProvides 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
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 DateTimeend_time- End DateTimeclass- 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 nilclass- CSS classes
Examples
<.expiration_date date={code.expiration_date} />
<.expiration_date date={nil} /> <!-- Shows "No expiration" -->Attributes
date(:any) - Defaults tonil.class(:string) - Defaults to"text-sm".
Displays relative time (e.g., "5m ago", "2h ago", "3d ago").
Attributes
datetime- DateTime struct or nilclass- 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".