<table>
  <tr>
    <td></td>
    <% current_component::SIZES.keys.each do |size| %>
      <td class="px-3 py-1 text-gray-500 text-center"><%= size.to_s.humanize %></td>
    <% end %>
  </tr>
  <% current_component::COLORS.keys.each do |color| %>
    <tr>
      <td class="font-bold px-3 py-1"><%= color.to_s.humanize %></td>
    </tr>
    <tr>
      <td class="text-gray-500 px-3 py-1">None</td>
      <% current_component::SIZES.keys.each do |size| %>
        <td class="px-3 py-1">
          <%= render current_component.new(name: name, color: color, size: size) %>
        </td>
      <% end %>
    </tr>
  <% end %>
</table>

<div class="mt-8">
  <h6 class="text-gray-500 mb-3 mt-0">
    Predefined values
  </h6>

  <% [current_component.yes, current_component.no].each do |component| %>
    <%= render component %>
  <% end %>
</div>
