Merge branch 'extract-section-component'

app/components/section_component.rb

@@ -0,0 +1,13 @@
+# frozen_string_literal: true
+
+class SectionComponent < ViewComponent::Base
+  include ApplicationHelper
+
+  def initialize(title:, link_text:, link_path:)
+    @title = title
+    @link_text = link_text
+    @link_path = link_path
+
+    super
+  end
+end

app/components/section_component/section_component.html.erb

@@ -0,0 +1,9 @@
+<section class="divide-y divide-slate-300">
+  <div class="flex justify-between content-baseline">
+    <h2 class="text-slate-800 font-semibold text-lg"><%= @title %></h2>
+    <%= link_to @link_text, @link_path, class: 'text-red-400 hover:underline' %>
+  </div>
+  <div class="pt-3">
+    <%= content %>
+  </div>
+</section>

app/views/interests/new.html.erb

@@ -6,12 +6,16 @@
 
 <h1 class="text-4xl tracking-tight leading-10 font-extrabold mb-3">An online music store. <br /> <span class="text-amber-600">Owned by us.</span></h1>
 
-<div class="max-w-3xl">
-<p class="mb-3 text-slate-600">We're a co-operatively owned music store, 100% run by and for the benefit of musicians, fans and the people who work here. <%= text_link_to "Find out more", about_path %>.</p>
+<div class="max-w-3xl mb-6">
+  <p class="mb-3 text-slate-600">We're a co-operatively owned music store, 100% run by and for the benefit of musicians, fans and the people who work here. <%= text_link_to "Find out more", about_path %>.</p>
 </div>
 
-<section class="mt-6 mb-12">
-  <h2 class="text-slate-400 mb-3 uppercase">Recently purchased</h2>
+<%= render(
+  SectionComponent.new(
+    title: 'Recently purchased',
+    link_text: "View All",
+    link_path: artists_path)
+) do %>
   <div class="grid grid-cols-4 gap-4 mb-3">
     <% Album.best_selling.limit(8).each do |album| %>
       <%= link_to(artist_album_path(album.artist, album)) do %>
@@ -23,7 +27,4 @@
       <% end %>
     <% end %>
   </div>
-  <div class="flex justify-end">
-    <%= text_link_to "Discover #{Artist.listed.count} more artists", artists_path %>
-  </div>
-</section>
+<% end %>

test/components/previews/section_component_preview.rb

@@ -0,0 +1,17 @@
+# frozen_string_literal: true
+
+class SectionComponentPreview < ViewComponent::Preview
+  def default
+    render(
+      SectionComponent.new(
+        title: 'Title',
+        link_text: 'Link Text',
+        link_path: 'http://example.com'
+      )
+    ) do
+      tag.div do
+        content_tag(:span, 'Section content')
+      end
+    end
+  end
+end

test/components/section_component_test.rb

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