rails8-memoapp/app/views/memos/index.html.erb

<div class="mb-8 mt-8">
  <div class="flex items-center gap-4">
    <%= search_form_for @q, html: { data: { turbo_frame: "memos", controller: "search" } } do |f| %>
      <div class="relative">
        <%= f.text_field :content_cont,
            class: "w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500",
            placeholder: "検索...",
            data: { action: "input->search#search" } %>
      </div>
    <% end %>
      <%= link_to new_memo_path,
    class: "bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-4 rounded-lg transition-colors duration-200",
    data: { turbo_frame: "modal" } do %>
  <span class="flex items-center">
    ＋ 入力
  </span>
<% end %>
  </div>
</div>
<%= turbo_frame_tag "memos", data: { turbo_action: :advance } do %>
  <div id="memos-container" class="flex flex-col gap-4">
    <%= render @memos %>
    <%= render "empty_results", query: @q&.content_cont if @memos.empty? %>
  </div>
  <% unless @memos.empty? %>
    <div class="text-center mt-8 flex justify-center items-center gap-4">
      <div class="flex-1 text-right">
        <%= link_to_previous_page @memos, "後退",
            class: "inline-flex items-center px-4 py-2 bg-gray-500 hover:bg-gray-600 text-white font-medium rounded-lg transition-colors duration-200",
            data: { turbo_frame: "memos-container" } if @memos.current_page > 1 %>
      </div>

      <div class="text-gray-700 mx-2">
        <%= @memos.current_page %> / <%= @memos.total_pages %> 枚数
      </div>

      <div class="flex-1 text-left">
        <%= link_to_next_page @memos, "前進",
            class: "inline-flex items-center px-4 py-2 bg-blue-500 hover:bg-blue-600 text-white font-medium rounded-lg transition-colors duration-200",
            data: { turbo_frame: "memos-container" } %>
      </div>
    </div>
  <% end %>
<% end %>