Update card component semantic and classes

ciscoLegrand · Oct 22, 2024 · 0042e85 · 0042e85
1 parent b8c80c5
commit 0042e85
Showing 1 changed file with 21 additions and 19 deletions.
diff --git a/app/components/oodle/card_component.html.erb b/app/components/oodle/card_component.html.erb
@@ -1,25 +1,27 @@
 <%= turbo_frame_tag @id do %>
-  <div class="max-w-lg mx-auto bg-white shadow-lg rounded-lg overflow-hidden">
-    <div class="flex flex-col gap-4 p-5">
-
+  <article class="card card-hover shadow-hover transform-hover">
+    <div class="card-body">
+
+      <% if @title.present? %>
+        <header class="card-header">
+          <h2 class="card-title">
+            <%= @title %>
+          </h2>
+        </header>
+      <% end %>
+
+      <section class="card-content">
+        <%= content %>
+      </section>
+
       <% if @actions.present? %>
-        <div class="flex justify-end items-end gap-4">
+        <footer class="card-footer card-actions">
           <% @actions.each do |action| %>
-            <%= action%>
+            <%= action %>
           <% end %>
-        </div>
+        </footer>
       <% end %>
-
-      <% if @title.present? %>
-        <h2 class="text-xl font-semibold text-gray-800 mb-4">
-          <%= @title %>
-        </h2>
-      <% end %>
-
-      <div class="text-gray-700">
-        <%= content %>
-      </div>
-    </div>
-  </div>
-<% end %>
 
+    </div>
+  </article>
+<% end %>