Maybe/app/views/transactions/_pagination.html.erb

<nav class="flex items-center justify-center px-4 mt-4 sm:px-0">
  <div>
    <% if pagy.prev %>
      <%= link_to pagy_url_for(pagy, pagy.prev), class: "inline-flex items-center px-3 py-3 text-sm font-medium text-gray-500 hover:border-gray-300 hover:text-gray-700" do %>
        <%= lucide_icon("chevron-left", class: "w-5 h-5 text-gray-500") %>
      <% end %>
    <% else %>
      <div class="inline-flex items-center px-3 py-3 text-sm font-medium hover:border-gray-300">
        <%= lucide_icon("chevron-left", class: "w-5 h-5 text-gray-200") %>
      </div>
    <% end %>
  </div>
  <div class="bg-gray-25 rounded-xl">
    <% pagy.series.each do |series_item| %>
      <% if series_item.is_a?(Integer) %>
        <%= link_to pagy_url_for(pagy, series_item), class: "inline-flex items-center px-3 py-3 text-sm font-medium text-gray-500 hover:border-gray-300 hover:text-gray-700" do %>
          <%= series_item %>
        <% end %>
      <% elsif series_item.is_a?(String) %>
        <%= link_to pagy_url_for(pagy, series_item), class: "shadow-lg ring-2 ring-inset ring-gray-200 rounded-xl bg-white inline-flex items-center m-1 px-4 py-2 text-sm font-medium text-gray-900" do %>
          <%= series_item %>
        <% end %>
      <% elsif series_item == :gap %>
        <span class="inline-flex items-center  px-3 py-3 text-sm font-medium text-gray-500">...</span>
      <% end %>
    <% end %>
  </div>
  <div>
    <% if pagy.next %>
      <%= link_to pagy_url_for(pagy, pagy.next), class: "inline-flex items-center px-3 py-3 text-sm font-medium text-gray-500 hover:border-gray-300 hover:text-gray-700" do %>
        <%= lucide_icon("chevron-right", class: "w-5 h-5 text-gray-500") %>
      <% end %>
    <% else %>
      <div class="inline-flex items-center px-3 py-3 text-sm font-medium hover:border-gray-300">
        <%= lucide_icon("chevron-right", class: "w-5 h-5 text-gray-200") %>
      </div>
    <% end %>
  </div>
</nav>