Display-only countdown timer widget rendered in two variants.

Both variants are zero-JS — the parent LiveView drives the timer by updating assigns (e.g. via Process.send_after/3 + handle_info/2).

Variants

Examples

<%!-- Circular (default) --%>
<.countdown_timer
  minutes={@minutes}
  seconds={@seconds}
  total_seconds={3600}
  label="60 min"
/>

<%!-- Flat with action buttons --%>
<.countdown_timer
  minutes={@minutes}
  seconds={@seconds}
  total_seconds={3600}
  variant={:flat}
  label="60 min"
  on_pause="pause_timer"
  on_stop="stop_timer"
/>

LiveView integration

def mount(_params, _session, socket) do
  total = 3600
  {:ok, assign(socket, minutes: 60, seconds: 0, total_seconds: total)}
end

def handle_info(:tick, %{assigns: %{minutes: 0, seconds: 0}} = socket) do
  {:noreply, socket}
end

def handle_info(:tick, socket) do
  remaining = socket.assigns.minutes * 60 + socket.assigns.seconds - 1
  Process.send_after(self(), :tick, 1_000)
  {:noreply, assign(socket,
    minutes: div(remaining, 60),
    seconds: rem(remaining, 60)
  )}
end