2024-02-11 19:02:27 +00:00
|
|
|
<div data-controller="currency-dropdown" class="absolute right-1 bottom-[10px] flex items-end">
|
2024-02-11 13:09:14 -06:00
|
|
|
<button type="button" class="flex items-center justify-between w-20 px-2 py-1 text-sm rounded-lg hover:bg-gray-100 focus:bg-gray-100" data-action="click->currency-dropdown#toggleMenu">
|
2024-02-27 12:43:49 -05:00
|
|
|
<div data-currency-dropdown-target="label"><%= f.object.currency %></div>
|
2024-02-11 19:02:27 +00:00
|
|
|
<%# Example of how account currency value is updated %>
|
2024-02-27 12:43:49 -05:00
|
|
|
<%= f.hidden_field :currency, data: {currency_dropdown_target: "input"} %>
|
2024-02-12 17:20:50 -05:00
|
|
|
<%= lucide_icon("chevron-down", class: "text-gray-500 w-5 h-5" ) %>
|
2024-02-11 19:02:27 +00:00
|
|
|
</button>
|
2024-02-12 17:20:50 -05:00
|
|
|
<ul data-currency-dropdown-target="menu" class="hidden fixed p-1 bg-white rounded-[10px] min-w-[112px] z-50 translate-y-2 border border-alpha-black-100 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.1)]">
|
2024-02-11 19:02:27 +00:00
|
|
|
<% options.each do |option| %>
|
2024-02-27 12:43:49 -05:00
|
|
|
<li data-action="click->currency-dropdown#selectOption" data-currency-dropdown-target="option" data-value="<%= option %>" class="flex justify-between items-center p-2 text-sm text-gray-700 hover:bg-gray-100 cursor-pointer rounded-lg <%= "bg-gray-100" if option === f.object.currency %>"><%= option %>
|
|
|
|
<%= inline_svg_tag('icn-check.svg', class: "text-gray-500 fill-current #{'hidden'if option != f.object.currency}") %>
|
2024-02-11 19:02:27 +00:00
|
|
|
</li>
|
|
|
|
<% end %>
|
|
|
|
</ul>
|
2024-02-26 20:20:38 +05:30
|
|
|
</div>
|