lib/petal_components/badge.ex

defmodule PetalComponents.Badge do
  use Phoenix.Component

  # prop label, :string
  # prop size, :string, options: ["xs", "sm", "md", "lg", "xl"]
  # prop color, :string, options: ["primary", "secondary", "info", "success", "warning", "danger", "gray"]
  def badge(assigns) do
    assigns = assign_new(assigns, :classes, fn ->
      badge_classes(assigns)
    end)

    ~H"""
    <badge class={@classes}>
      <%= @label %>
    </badge>
    """
  end

  def badge_classes(opts \\ %{}) do
    opts = %{
      size: opts[:size] || "sm",
      color: opts[:color] || "primary"
    }

    size_css =
      case opts[:size] do
        "xs" -> "text-xs leading-4 px-2.5 py-1"
        "sm" -> "text-sm leading-4 px-2.5 py-1"
        "md" -> "text-sm leading-5 px-4 py-2"
        "lg" -> "text-base leading-6 px-4 py-2"
        "xl" -> "text-base leading-6 px-6 py-3"
      end

    color_css = get_color_classes(opts)

    """
      #{color_css}
      #{size_css}
      font-medium
      rounded-lg
      inline-flex items-center justify-center
      focus:outline-none
    """
  end

  def get_color_classes(%{color: "primary"}) do
    "text-primary-600 bg-primary-100"
  end

  def get_color_classes(%{color: "secondary"}) do
    "text-secondary-600 bg-secondary-100"
  end

  def get_color_classes(%{color: "info"}) do
    "text-blue-600 bg-blue-100"
  end

  def get_color_classes(%{color: "success"}) do
    "text-green-600 bg-green-100"
  end

  def get_color_classes(%{color: "warning"}) do
    "text-yellow-600 bg-yellow-100"
  end

  def get_color_classes(%{color: "danger"}) do
    "text-red-600 bg-red-100"
  end

  def get_color_classes(%{color: "gray"}) do
    "text-gray-600 bg-gray-100"
  end
end