Tailwind scaffolded templates

Author: maebeale

lib/templates/erb/scaffold/_form.html.erb.tt

@@ -10,11 +10,13 @@
     <%% end %>
   </div>
 
-  <div class="form-actions mt-3">
+  <div class="form-actions flex justify-end gap-4 mt-3">
     <% if @<%= singular_table_name %>.persisted? && current_user.super_user? %>
-      <%%= link_to "Delete", @<%= singular_table_name %>, method: :delete, data: { confirm: "Are you sure?" }, class: "btn btn-outline-danger" %>
+      <%%= link_to_button "Delete", @<%= singular_table_name %>, method: :delete, variant: :danger_outline, data: { confirm: "Are you sure?" } %>
     <% end %>
-    <%%= link_to "Cancel", <%= plural_table_name %>_path, class: "btn btn-outline-secondary" %>
-    <%%= f.button :submit, class: "btn btn-outline-primary ms-2" %>
+    <%%= link_to_button "Cancel", <%= plural_table_name %>_path, variant: :secondary_outline %>
+    <%%= f.button :submit, class: 'inline-flex items-center gap-2 px-4 py-2 rounded-lg
+                        transition-colors duration-200 font-medium shadow-sm text-sm
+                        border border-blue-600 text-grey-600 hover:bg-blue-600 hover:text-white' %>
   </div>
 <%% end %>

lib/templates/erb/scaffold/edit.html.erb.tt

@@ -1,6 +1,7 @@
-<div class="row">
-  <div class="col-md-12">
-    <h2>Edit <%%= @<%= singular_table_name %>.class.model_name.human %></h2>
-    <%%= render "form", locals: { <%= singular_table_name %>: @<%= singular_table_name %> } %>
+<div class="mx-auto px-4 py-8">
+  <h2 class="text-3xl font-semibold text-gray-900 mb-4">Edit <%%= @<%= singular_table_name %>.class.model_name.human %></h2>
+  <div class="border-b border-gray-300 mb-6"></div>
+    <div class="mt-4 pt-4">
+      <%= render 'form', <%= singular_table_name %>: @<%= singular_table_name %> %>
   </div>
 </div>

lib/templates/erb/scaffold/index.html.erb.tt

@@ -7,7 +7,7 @@
     </div>
     <div class="col-md-3 col-lg-4 width">
       <div class="entry-content">
-        <%%= link_to 'New ' + <%= singular_table_name.classify %>.model_name.human, new_<%= singular_table_name %>_path, class: "btn btn-outline-primary" %>
+        <%%= link_to_button 'New ' + <%= singular_table_name.classify %>.model_name.human.downcase, new_<%= singular_table_name %>_path, variant: :primary_outline %>
       </div>
     </div>
   </div>

lib/templates/erb/scaffold/new.html.erb.tt

@@ -1,6 +1,7 @@
-<div class="row">
-  <div class="col-md-12">
-    <h2>New <%%= @<%= singular_table_name %>.class.model_name.human %></h2>
-    <%%= render "form", locals: { <%= singular_table_name %>: @<%= singular_table_name %> } %>
+<div class="mx-auto px-4 py-8">
+  <h2 class="text-3xl font-semibold text-gray-900 mb-4">New <%%= @<%= singular_table_name %>.class.model_name.human %></h2>
+  <div class="border-b border-gray-300 mb-6"></div>
+    <div class="mt-4 pt-4">
+      <%= render 'form', <%= singular_table_name %>: @<%= singular_table_name %> %>
   </div>
-</div>
+</div>

lib/templates/erb/scaffold/show.html.erb.tt

@@ -1,23 +1,18 @@
-<div class="row mb-3">
-  <div class="col text-end">
-    <%%= link_to "Edit", edit_<%= singular_table_name %>_path(@<%= singular_table_name %>), class: "btn btn-outline-primary" if current_user.super_user? %>
-  </div>
-</div>
-
-<div class="row">
-  <div class="col-md-12">
-    <h2><%%= @<%= singular_table_name %>.class.model_name.human %> Details</h2>
+<div class="curriculum-detail py-6 min-h-screen">
+  <div class="max-w-5xl mx-auto px-4">
+    <div class="flex justify-end mb-6">
+      <%= link_to 'Back', <%= plural_table_name %>_path, variant: :secondary_outline %>
+      <%%= link_to_button("Edit", edit_<%= singular_table_name %>_path(@<%= singular_table_name %>), variant: :secondary_outline) if current_user.super_user? %>
+    </div>
+    <div class="max-w-3xl mx-auto bg-white border border-gray-200 rounded-xl shadow p-6">
+      <h2 class="text-2xl font-bold mb-4">Event Details</h2>
 
-    <table class="table table-striped">
-      <tbody>
-        <%% attributes = @<%= singular_table_name %>.attributes.keys if @<%= singular_table_name %> %>
-        <%% attributes&.each do |attribute| -%>
-          <tr>
-            <th><%%= attribute.humanize %></th>
-            <td><%%= @<%= singular_table_name %>.send(attribute) %></td>
-          </tr>
-        <%% end -%>
-      </tbody>
-    </table>
+      <% attributes.each do |attribute| -%>
+        <div class="mb-3">
+          <p class="font-bold text-gray-700"><%= attribute.human_name %>:</p>
+          <p class="text-gray-900"><%= @<%= singular_table_name %>.<%= attribute.name %> %></p>
+        </div>
+      <% end -%>
+    </div>
   </div>
 </div>