Packages
petal_components
4.8.1
4.8.1
4.8.0
4.7.0
4.6.2
4.6.1
4.6.0
4.5.0
4.4.0
4.3.0
4.2.1
4.2.0
4.1.2
4.1.1
4.1.0
4.0.12
4.0.11
4.0.10
4.0.6
4.0.5
4.0.4
4.0.3
4.0.1
3.2.2
3.2.1
3.2.0
3.1.0
3.0.2
3.0.1
3.0.0
2.9.3
2.9.2
retired
2.9.1
retired
2.9.0
retired
2.8.4
2.8.3
2.8.2
2.8.1
2.8.0
2.7.4
2.7.3
2.7.2
2.7.1
2.7.0
2.6.1
2.6.0
2.5.2
2.5.1
2.5.0
2.4.3
2.4.2
2.4.1
2.4.0
2.3.0
2.2.1
2.2.0
2.1.2
2.1.1
2.1.0
2.0.6
2.0.5
2.0.4
2.0.3
2.0.2
2.0.1
2.0.0
1.9.3
1.9.2
1.9.1
1.9.0
1.8.0
1.7.1
1.7.0
1.6.2
1.6.1
1.6.0
1.5.5
1.5.4
1.5.3
1.5.2
1.5.1
1.5.0
1.4.9
1.4.8
1.4.7
1.4.6
1.4.5
1.4.4
1.4.3
1.4.2
1.4.1
1.4.0
1.3.0
1.2.14
1.2.13
1.2.12
1.2.11
1.2.10
1.2.9
1.2.8
1.2.7
1.2.6
1.2.5
1.2.4
1.2.3
1.2.2
1.2.1
1.2.0
1.1.6
1.1.5
1.1.4
1.1.3
1.1.2
1.1.1
1.1.0
1.0.8
1.0.7
1.0.6
1.0.5
1.0.4
1.0.3
1.0.2
1.0.1
1.0.0
0.19.10
0.19.9
0.19.8
0.19.7
0.19.6
0.19.5
0.19.4
0.19.3
0.19.2
0.19.1
0.19.0
0.18.5
0.18.4
0.18.3
0.18.2
0.18.1
0.18.0
0.17.7
0.17.6
0.17.5
0.17.4
0.17.3
0.17.2
0.17.1
0.17.0
0.16.0
0.15.0
0.14.1
0.14.0
0.13.7
0.13.6
0.13.5
0.13.4
0.13.3
0.13.2
0.13.1
0.13.0
0.12.0
0.11.4
0.11.3
0.11.2
0.11.1
0.11.0
0.10.8
0.10.7
0.10.6
0.10.5
0.10.4
0.10.3
0.10.2
0.10.1
0.10.0
0.9.3
0.9.2
0.9.1
0.9.0
0.8.0
0.7.0
0.6.1
0.6.0
0.5.1
0.5.0
0.4.0
0.3.2
0.3.1
0.3.0
0.2.2
0.2.1
0.2.0
0.1.0
Shadcn-style Phoenix LiveView components that AI assistants can actually use. Pair with the MCP server so AI coding tools can inspect the real component API.
Current section
Files
Jump to
Current section
Files
lib/petal_components/showcase/local_time.ex
defmodule PetalComponents.Showcase.LocalTime do
@moduledoc false
use PetalComponents.Showcase,
component: PetalComponents.LocalTime,
title: "Local time",
functions: [:local_time]
example :relative, "Relative, ticking live",
description:
"Intl.RelativeTimeFormat with numeric auto, so you get \"yesterday\" rather than \"1 day ago\". Fresh timestamps tick every few seconds, old ones barely at all, and past the threshold it flips to the absolute form. Hover for the full date." do
~H"""
<div class="flex flex-col gap-2 text-sm">
<.local_time
id="showcase-lt-rel-1"
at={DateTime.add(DateTime.utc_now(), -12)}
format="relative"
/>
<.local_time
id="showcase-lt-rel-2"
at={DateTime.add(DateTime.utc_now(), -540)}
format="relative"
/>
<.local_time
id="showcase-lt-rel-3"
at={DateTime.add(DateTime.utc_now(), -90_000)}
format="relative"
/>
<.local_time
id="showcase-lt-rel-4"
at={DateTime.add(DateTime.utc_now(), 1_800)}
format="relative"
/>
</div>
"""
end
example :absolute, "Absolute, in the visitor's locale",
description:
"The default is medium date + short time in the browser's own language and timezone. Presets cover date and time halves; a map of Intl.DateTimeFormat options unlocks the rest." do
~H"""
<div class="flex flex-col gap-2 text-sm">
<.local_time id="showcase-lt-abs-1" at={~U[2026-07-21 08:30:00Z]} />
<.local_time id="showcase-lt-abs-2" at={~U[2026-07-21 08:30:00Z]} format="date" />
<.local_time id="showcase-lt-abs-3" at={~U[2026-07-21 08:30:00Z]} format="time" />
<.local_time
id="showcase-lt-abs-4"
at={~U[2026-07-21 08:30:00Z]}
format={%{weekday: "long", day: "numeric", month: "long", hour: "2-digit", minute: "2-digit"}}
/>
</div>
"""
end
example :zones, "Pinned locales and timezones",
description:
"The same instant for a Berlin colleague and a Sydney one - locale and timezone override the browser defaults per element." do
~H"""
<div class="flex flex-col gap-2 text-sm">
<.local_time
id="showcase-lt-zone-1"
at={~U[2026-07-21 08:30:00Z]}
locale="de-DE"
timezone="Europe/Berlin"
/>
<.local_time
id="showcase-lt-zone-2"
at={~U[2026-07-21 08:30:00Z]}
locale="en-AU"
timezone="Australia/Sydney"
/>
</div>
"""
end
end