まともなページネーション

app/views/memos/_form.html.erb

@@ -2,7 +2,7 @@
  <div class="space-y-6">
   <%= form_with(model: memo,
       class: "space-y-6",
-      data: { turbo: true }) do |f| %>
+      data: { turbo: false }) do |f| %>
     <% if memo.errors.any? %>
       <div class="bg-red-50 p-4 rounded-md">
         <div class="text-red-700">

app/views/memos/index.html.erb

@@ -12,7 +12,7 @@
     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>
@@ -22,9 +22,23 @@
     <%= render @memos %>
     <%= render "empty_results", query: @q&.content_cont if @memos.empty? %>
   </div>
-  <div class="text-center mt-8">
-    <%= 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>
+  <% 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 %>