CardComponent: Gray the Footer, pull Classes into HTML

app/components/card_component.html.erb

@@ -1,6 +1,6 @@
-<div <%==attributes(classes: card_classes_wrapper) %>>
+<div <%==attributes(classes: "shadow rounded-lg bg-white group-hover:bg-slate-50 flex flex-col justify-between #{header_classes}") %>>
  <% if header? %>
-  <header>
+  <header class="p-2 sm:p-4">
     <%= header%>
   </header>
 
@@ -9,12 +9,12 @@
     NOTE: content? is not always working as described, and is returning a proc in some cases rather than a boolean
   %>
   <% if content.present? %>
-    <div class="<%== card_classes_content %>">
+    <div class="flex flex-col h-full justify-between p-2 sm:p-4 <%= content_classes%>">
       <%= content %>
     </div>
   <% end %>
   <% if footer? %>
-    <div class="<%== card_classes_footer %>">
+    <div class="bg-slate-50 p-2 sm:p-4 <%= "rounded-t-none" if content.blank? %> <%= footer_classes %>">
       <%= footer %>
     </div>
   <% end %>

app/components/card_component.rb

@@ -1,33 +1,15 @@
 class CardComponent < ApplicationComponent
-  renders_one :header
-  renders_one :footer
+  attr_accessor :wrapper_classes
 
-  private
+  renders_one :header
+  attr_accessor :header_classes
 
-  def card_classes_content
-    [
-      "p-4",
-      "sm:p-6"
-    ].compact.join(" ")
-  end
+  attr_accessor :content_classes
 
-  def card_classes_wrapper
-    [
-      "shadow",
-      "rounded-lg",
-      "h-full",
-      "bg-white",
-      "group-hover:bg-slate-50"
-    ].compact.join(" ")
-  end
+  renders_one :footer
+  attr_accessor :footer_classes
 
-  def card_classes_footer
-    [
-      "bg-orange-50",
-      "p-4",
-      "sm:p-6",
-      # content? is not always working as described, and is returning a proc in some cases rather than a boolean
-      ("rounded-t-none" if content.blank?)
-    ].compact.join(" ")
+  def initialize(header_classes: "", content_classes: "", wrapper_classes: "", **kwargs)
+    super(**kwargs)
   end
 end