lib/petal/badge.ex
defmodule PetalComponents.Badge do
use Phoenix.Component
def badge(assigns) do
~H"""
<badge class={badge_classes(assigns)}>
<%= @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-800 bg-primary-100"
end
def get_color_classes(%{color: "secondary"}) do
"text-secondary-800 bg-secondary-100"
end
def get_color_classes(%{color: "white"}) do
"text-white-800 bg-white-100"
end
def get_color_classes(%{color: "black"}) do
"text-white bg-black"
end
def get_color_classes(%{color: "green"}) do
"text-green-800 bg-green-100"
end
def get_color_classes(%{color: "red"}) do
"text-red-800 bg-red-100"
end
def get_color_classes(%{color: "blue"}) do
"text-blue-800 bg-blue-100"
end
def get_color_classes(%{color: "gray"}) do
"text-gray-800 bg-gray-100"
end
def get_color_classes(%{color: "gray-light"}) do
"text-gray-500 bg-gray-100"
end
def get_color_classes(%{color: "pink"}) do
"text-pink-800 bg-pink-100"
end
def get_color_classes(%{color: "purple"}) do
"text-purple-800 bg-purple-100"
end
def get_color_classes(%{color: "orange"}) do
"text-yellow-600 bg-yellow-100"
end
def get_color_classes(%{color: "yellow"}) do
"text-yellow-800 bg-yellow-100"
end
end