Tag

Categorized content labels

Preview

Tag

Props Editor

✅ JSON is valid - Click "Preview Update" to see changes

Source Code

defmodule FeenixUiWeb.Components.TagComponent do
  use Phoenix.Component

  def render(assigns) do
    assigns = assign_new(assigns, :text, fn -> "Tag" end)
    assigns = assign_new(assigns, :variant, fn -> "primary" end)
    assigns = assign_new(assigns, :size, fn -> "md" end)

    assigns = assign(assigns, :tag_classes, get_tag_classes(assigns.variant, assigns.size))

    ~H"""
    <span class={@tag_classes}>
      <%= @text %>
    </span>
    """
  end

  defp get_tag_classes(variant, size) do
    base_classes = "inline-flex items-center font-medium rounded-md"

    variant_classes = case variant do
      "primary" -> "bg-primary-100 text-primary-800"
      "secondary" -> "bg-secondary-100 text-secondary-800"
      "success" -> "bg-success-100 text-success-800"
      "warning" -> "bg-warning-100 text-warning-800"
      "danger" -> "bg-danger-100 text-danger-800"
      "info" -> "bg-info-100 text-info-800"
      _ -> "bg-gray-100 text-gray-800"
    end

    size_classes = case size do
      "sm" -> "px-2 py-0.5 text-xs"
      "md" -> "px-2.5 py-0.5 text-sm"
      "lg" -> "px-3 py-1 text-base"
      _ -> "px-2.5 py-0.5 text-sm"
    end

    "#{base_classes} #{variant_classes} #{size_classes}"
  end
end