index.html.erb in madmin-1.2.1

- old
+ new
@@ -1,45 +1,57 @@
-<div class="flex justify-between">
-  <h1><%= resource.friendly_name.pluralize %></h1>
-  <%= link_to "New #{resource.friendly_name}", resource.new_path %>
+<div class="md:flex justify-between items-center space-y-4 md:space-y-0">
+  <h1 class="text-xl font-semibold"><%= resource.friendly_name.pluralize %></h1>
+
+  <div class="flex-grow flex md:justify-end gap-4">
+    <form class="flex items-center gap-2 relative">
+      <%= hidden_field_tag :page, params[:page], value: 1, class: "hidden" %>
+      <%= search_field_tag :q, params[:q], placeholder: "Search", class: "rounded-full px-4 focus:bg-white focus:border-indigo-500" %>
+      <%= link_to clear_search_params, class: "absolute top-1/2 right-3 text-gray-500 bg-white transform -translate-y-1/2" do %>
+        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
+          <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd" />
+        </svg>
+      <% end %>
+    </form>
+
+    <%= link_to resource.new_path, class: "bg-white hover:bg-gray-100 text-gray-800 font-semibold py-2 px-4 border border-gray-400 rounded shadow" do %>
+      New <span class="hidden md:inline"><%= resource.friendly_name %></span>
+    <% end %>
+  </div>
 </div>
 
-<div>
+<div class="mb-4">
   <% if resource.scopes.any? %>
-    <%= link_to "All", resource.index_path %>
+    <%= link_to "All", resource.index_path, class: class_names("p-2 rounded", {"bg-gray-100" =>  params[:scope].blank?}) %>
   <% end %>
 
   <% resource.scopes.each do |scope| %>
-    <%= link_to scope.to_s.humanize, resource.index_path(scope: scope) %>
+    <%= link_to scope.to_s.humanize, resource.index_path(scope: scope), class: class_names("p-2 rounded", {"bg-gray-100" => params[:scope] == scope.to_s}) %>
   <% end %>
 </div>
 
-<table class="table-auto">
+<table class="min-w-full divide-y divide-gray-200">
   <thead>
-    <tr>
-      <% resource.attributes.each do |attribute| %>
-        <% next if attribute[:field].nil? %>
-        <% next unless attribute[:field].visible?(action_name) %>
+    <tr class="border-b border-gray-200">
+      <% resource.attributes.values.each do |attribute| %>
+        <% next if attribute.field.nil? %>
+        <% next unless attribute.field.visible?(action_name) %>
 
-        <th><%= sortable attribute[:name], attribute[:name].to_s.titleize %></th>
+        <th class="py-2 px-4 text-left text-xs text-gray-500 font-medium uppercase whitespace-nowrap"><%= sortable attribute.name, attribute.name.to_s.titleize %></th>
       <% end %>
-      <th>Actions</th>
+      <th class="py-2 px-4 text-left text-xs text-gray-500 font-medium uppercase">Actions</th>
     </tr>
   </thead>
 
-  <tbody>
+  <tbody class="text-sm divide-y">
     <% @records.each do |record| %>
       <tr>
-        <% resource.attributes.each do |attribute| %>
-          <% next if attribute[:field].nil? %>
-          <% next unless attribute[:field].visible?(action_name) %>
-
-          <% field = attribute[:field] %>
-
-          <td><%= render partial: field.to_partial_path("index"), locals: { field: field, record: record } %></td>
+        <% resource.attributes.values.each do |attribute| %>
+          <% next if attribute.field.nil? %>
+          <% next unless attribute.field.visible?(action_name) %>
+          <td class="px-4 py-2"><%= render partial: attribute.field.to_partial_path("index"), locals: { field: attribute.field, record: record } %></td>
         <% end %>
 
-        <td><%= link_to "View", resource.show_path(record) %></td>
+        <td class="px-4 py-2 text-center"><%= link_to "View", resource.show_path(record), class: "text-indigo-500" %></td>
       </tr>
     <% end %>
   </tbody>
 </table>
 