app/components/spina/user_interface/translations_component.html.erb
<div class="relative" data-controller="reveal" data-reveal-away-value>
<button type="button" class="btn btn-default px-3" data-action="reveal#toggle">
<%= helpers.heroicon("chat-alt", style: :solid, class: 'w-4 h-4 text-gray-300') %>
<span class="ml-1 font-semibold"><%= @label %></span>
</button>
<div hidden data-reveal data-transition class="origin-top-right absolute right-0 mt-2 w-56 rounded-md shadow-lg border border-gray-200 z-20">
<div class="rounded-md bg-white shadow-xs">
<div class="py-1">
<% locales.each do |locale| %>
<%= link_to "?locale=#{locale}", class: "block px-3 py-2 text-sm leading-4 text-gray-700 hover:bg-gray-100 hover:text-gray-900 focus:outline-none focus:bg-gray-100 focus:text-gray-900 font-medium" do %>
<div class="text-gray-700">
<%=t('spina.pages.edit_translation', language: '<span class="font-semibold">' + t("spina.languages.#{locale}") + '</span>').html_safe %>
</div>
<% end %>
<% end %>
</div>
</div>
</div>
</div>