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

44 lines
1.8 KiB
Text
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<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 %>