バッジ

<%#
  Badge Component (Classic)

  Usage:
    <%= render "components/badge", label: "Active" %>
    <%= render "components/badge", label: "Published", variant: :success %>
    <%= render "components/badge", label: "Pending", variant: :warning %>
%>

<%
  variant ||= :neutral
  additional_class ||= defined?(binding.local_variable_get(:class)) ? binding.local_variable_get(:class) : ""

  base_classes = "inline-flex items-center px-2.5 py-0.5 rounded-md text-xs font-medium"

  variant_classes = case variant.to_sym
  when :success
    "bg-emerald-50 text-emerald-700 ring-1 ring-inset ring-emerald-600/20 dark:bg-emerald-900/30 dark:text-emerald-400 dark:ring-emerald-400/30"
  when :warning
    "bg-amber-50 text-amber-700 ring-1 ring-inset ring-amber-600/20 dark:bg-amber-900/30 dark:text-amber-400 dark:ring-amber-400/30"
  when :info
    "bg-blue-50 text-blue-700 ring-1 ring-inset ring-blue-600/20 dark:bg-blue-900/30 dark:text-blue-400 dark:ring-blue-400/30"
  when :neutral
    "bg-slate-100 text-slate-600 ring-1 ring-inset ring-slate-500/10 dark:bg-slate-800 dark:text-slate-400 dark:ring-slate-400/20"
  else
    "bg-slate-100 text-slate-600 ring-1 ring-inset ring-slate-500/10 dark:bg-slate-800 dark:text-slate-400 dark:ring-slate-400/20"
  end

  all_classes = [base_classes, variant_classes, additional_class].join(" ")
%>

<span class="<%= all_classes %>"><%= label %></span>

# frozen_string_literal: true

class BadgeComponent < ViewComponent::Base
  VARIANTS = %i[neutral success warning info].freeze

  attr_reader :label, :variant

  def initialize(label:, variant: :neutral, **extra_classes)
    @label = label
    @variant = variant.to_sym
    @extra_classes = extra_classes[:class] || ""
  end

  def badge_classes
    [ base_classes, variant_classes, @extra_classes ].compact.join(" ")
  end

  private

  def base_classes
    "inline-flex items-center px-2.5 py-0.5 rounded-md text-xs font-medium"
  end

  def variant_classes
    case @variant
    when :success
      "bg-emerald-50 text-emerald-700 ring-1 ring-inset ring-emerald-600/20 dark:bg-emerald-900/30 dark:text-emerald-400 dark:ring-emerald-400/30"
    when :warning
      "bg-amber-50 text-amber-700 ring-1 ring-inset ring-amber-600/20 dark:bg-amber-900/30 dark:text-amber-400 dark:ring-amber-400/30"
    when :info
      "bg-blue-50 text-blue-700 ring-1 ring-inset ring-blue-600/20 dark:bg-blue-900/30 dark:text-blue-400 dark:ring-blue-400/30"
    when :neutral
      "bg-slate-100 text-slate-600 ring-1 ring-inset ring-slate-500/10 dark:bg-slate-800 dark:text-slate-400 dark:ring-slate-400/20"
    else
      "bg-slate-100 text-slate-600 ring-1 ring-inset ring-slate-500/10 dark:bg-slate-800 dark:text-slate-400 dark:ring-slate-400/20"
    end
  end
end

<span class="<%= badge_classes %>"><%= @label %></span>