File size: 2,326 Bytes
8da2481 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 | defmodule PlausibleWeb.Components.FlowProgress do
@moduledoc """
Component for provisioning/registration flows displaying
progress status. See `PlausibleWeb.Flows` for the list of
flow definitions.
"""
use Phoenix.Component
attr :flow, :string, required: true, values: PlausibleWeb.Flows.valid_keys()
attr :current_step, :string, required: true, values: PlausibleWeb.Flows.valid_values()
def render(assigns) do
steps = PlausibleWeb.Flows.steps(assigns.flow)
current_step_idx = Enum.find_index(steps, &(&1 == assigns.current_step))
assigns =
assign(assigns,
steps: steps,
current_step_idx: current_step_idx
)
~H"""
<div :if={not Enum.empty?(@steps)} class="mt-6 hidden md:block" id="flow-progress">
<div class="flex items-center justify-between max-w-4xl mx-auto my-8">
<%= for {step, idx} <- Enum.with_index(@steps) do %>
<div class="flex items-center text-base">
<div
:if={idx < @current_step_idx}
class="size-6 bg-green-500 dark:bg-green-600 text-white rounded-full flex items-center justify-center"
>
<Heroicons.check class="size-4" />
</div>
<div
:if={idx == @current_step_idx}
class="size-6 bg-indigo-600 text-xs text-white font-bold rounded-full flex items-center justify-center"
>
{idx + 1}
</div>
<div
:if={idx > @current_step_idx}
class="size-6 bg-gray-300 text-xs text-white font-bold dark:bg-gray-800 rounded-full flex items-center justify-center"
>
{idx + 1}
</div>
<span :if={idx < @current_step_idx} class="ml-2 text-gray-500">
{step}
</span>
<span
:if={idx == @current_step_idx}
class="ml-2 font-semibold text-black dark:text-gray-300"
>
{step}
</span>
<span :if={idx > @current_step_idx} class="ml-2 text-gray-500">
{step}
</span>
</div>
<div :if={idx + 1 != length(@steps)} class="flex-1 h-px bg-gray-300 mx-4 dark:bg-gray-800 ">
</div>
<% end %>
</div>
</div>
"""
end
end
|