Extract CardGridComponent

So that we can apply a consistent break point for all of these grids
of cards.

app/components/card_grid_component.rb

@@ -0,0 +1,4 @@
+# frozen_string_literal: true
+
+class CardGridComponent < ViewComponent::Base
+end

app/components/card_grid_component/card_grid_component.html.erb

@@ -0,0 +1,3 @@
+<div class="grid grid-cols-2 md:grid-cols-4 gap-4 mb-3">
+  <%= content %>
+</div>

app/views/artists/index.html.erb

@@ -9,8 +9,7 @@
 <% end %>
 
 <%= render(SectionComponent.new(title: 'Artists')) do %>
-
-  <div class="pt-4 grid grid-cols-3 gap-4">
+  <%= render(CardGridComponent.new) do %>
     <% @artists.order(:name).each do |artist| %>
       <div>
         <%= link_to(artist_path(artist)) do %>
@@ -23,5 +22,5 @@
         <% end %>
       </div>
     <% end %>
-  </div>
+  <% end %>
 <% end %>

app/views/artists/show.html.erb

@@ -10,7 +10,7 @@
 <% end %>
 
 <%= render(SectionComponent.new) do %>
-  <div class="flex flex-row border-b-2 border-b-slate-100 pb-6">
+  <div class="flex flex-row border-b-2 border-b-slate-100 pb-6 mb-3">
     <div class="basis-1/4 mr-4 m:mr-0">
       <div class="aspect-w-1 aspect-h-1">
         <% if @artist.profile_picture.representable? %>
@@ -25,7 +25,7 @@
     </div>
   </div>
 
-  <div class="pt-4 grid grid-cols-3 gap-4">
+  <%= render(CardGridComponent.new) do %>
     <% @albums.in_release_order.each do |album| %>
       <%= link_to(artist_album_path(album.artist, album)) do %>
         <%= render(CardComponent.new(
@@ -35,5 +35,5 @@
       )) %>
       <% end %>
     <% end %>
-  </div>
+  <% end %>
 <% end %>

app/views/collections/show.html.erb

@@ -4,7 +4,7 @@
     <p class="class='text-sm text-slate-600">There's nothing in your collection at the moment.</p>
   <% end %>
 
-  <div class="pt-4 grid grid-cols-3 gap-4">
+  <%= render(CardGridComponent.new) do %>
     <% Current.user.collection.each do |purchase| %>
       <%= link_to(artist_album_path(purchase.album.artist, purchase.album)) do %>
         <%= render(CardComponent.new(
@@ -14,5 +14,5 @@
       )) %>
       <% end %>
     <% end %>
-  </div>
+  <% end %>
 <% end %>

app/views/interests/new.html.erb

@@ -16,7 +16,7 @@
     link_text: "View All",
     link_path: artists_path)
 ) do %>
-  <div class="grid grid-cols-4 gap-4 mb-3">
+  <%= render(CardGridComponent.new) do %>
     <% Album.best_selling.limit(8).each do |album| %>
       <%= link_to(artist_album_path(album.artist, album)) do %>
         <%= render(CardComponent.new(
@@ -26,5 +26,5 @@
         )) %>
       <% end %>
     <% end %>
-  </div>
+  <% end %>
 <% end %>

test/components/card_grid_component_test.rb

@@ -0,0 +1,12 @@
+# frozen_string_literal: true
+
+require 'test_helper'
+
+class CardGridComponentTest < ViewComponent::TestCase
+  def test_component_renders_something_useful
+    # assert_equal(
+    #   %(<span>Hello, components!</span>),
+    #   render_inline(CardGridComponent.new(message: "Hello, components!")).css("span").to_html
+    # )
+  end
+end