lib/petal_components/progress.ex

defmodule PetalComponents.Progress do
  use Phoenix.Component

  # prop size, :string, options: ["xs", "sm", "md", "lg", "xl"]
  # prop color, :string, options: ["primary", "secondary", "info", "success", "warning", "danger"]
  # prop class, :string
  # prop value, :integer
  # prop max, :integer
  # prop label, :string [xl]
  def progress(assigns) do
    assigns = assigns
      |> assign_new(:label, fn -> "" end)
      |> assign_new(:class, fn -> "" end)
      |> assign_new(:size, fn -> "md" end)
      |> assign_new(:value, fn -> nil end)
      |> assign_new(:color, fn -> "primary" end)
      |> assign_new(:max, fn -> 100 end)

    ~H"""
    <div class={@class}>
      <div class={"#{get_parent_classes(@size)} flex overflow-hidden #{get_parent_color_classes(@color)}"}>
        <span class={"#{get_color_classes(@color)} text-xs flex flex-col text-center text-white justify-center whitespace-nowrap font-normal leading-6 px-4 py-2"} style={"width: #{round(@value/@max*100)}%"}>
          <%= if @size == "xl" do %>
            <%= @label %>
          <% end %>
        </span>
      </div>
    </div>
    """
  end

  defp get_color_classes("primary"), do: "bg-blue-500"
  defp get_color_classes("secondary"), do: "bg-pink-500"
  defp get_color_classes("info"), do: "bg-blue-500"
  defp get_color_classes("success"), do: "bg-green-500"
  defp get_color_classes("warning"), do: "bg-yellow-500"
  defp get_color_classes("danger"), do: "bg-red-500"

  defp get_parent_classes("xs"), do: "h-1 rounded-sm"
  defp get_parent_classes("sm"), do: "h-2 rounded-md"
  defp get_parent_classes("md"), do: "h-3 rounded-md"
  defp get_parent_classes("lg"), do: "h-4 rounded-lg"
  defp get_parent_classes("xl"), do: "h-5 rounded-xl"

  defp get_parent_color_classes("primary"), do: "bg-blue-100"
  defp get_parent_color_classes("secondary"), do: "bg-pink-100"
  defp get_parent_color_classes("info"), do: "bg-blue-100"
  defp get_parent_color_classes("success"), do: "bg-green-100"
  defp get_parent_color_classes("warning"), do: "bg-yellow-100"
  defp get_parent_color_classes("danger"), do: "bg-red-100"

end