From 7d7b0ed077accae12bf8b0782f078cb85eeeb312 Mon Sep 17 00:00:00 2001
From: Chris Lowis <chris.lowis@gmail.com>
Date: Fri, 9 Aug 2024 16:03:54 +0100
Subject: [PATCH 1/3] Extract a SectionComponent from interests/new

---
 app/components/section_component.rb             | 13 +++++++++++++
 .../section_component.html.erb                  |  9 +++++++++
 app/views/interests/new.html.erb                | 17 +++++++++--------
 .../previews/section_component_preview.rb       | 17 +++++++++++++++++
 test/components/section_component_test.rb       | 12 ++++++++++++
 5 files changed, 60 insertions(+), 8 deletions(-)
 create mode 100644 app/components/section_component.rb
 create mode 100644 app/components/section_component/section_component.html.erb
 create mode 100644 test/components/previews/section_component_preview.rb
 create mode 100644 test/components/section_component_test.rb

diff --git a/app/components/section_component.rb b/app/components/section_component.rb
new file mode 100644
index 00000000..f5d19dbe
--- /dev/null
+++ b/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
diff --git a/app/components/section_component/section_component.html.erb b/app/components/section_component/section_component.html.erb
new file mode 100644
index 00000000..3b1df632
--- /dev/null
+++ b/app/components/section_component/section_component.html.erb
@@ -0,0 +1,9 @@
+<section class="mt-6 mb-12">
+  <h2 class="text-slate-400 mb-3 uppercase"><%= @title %></h2>
+
+  <%= content %>
+
+  <div class="flex justify-end">
+    <%= text_link_to @link_text, @link_path %>
+  </div>
+</section>
diff --git a/app/views/interests/new.html.erb b/app/views/interests/new.html.erb
index cee0948c..ab6b0c0e 100644
--- a/app/views/interests/new.html.erb
+++ b/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: "Discover #{Artist.listed.count} more artists",
+    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 %>
diff --git a/test/components/previews/section_component_preview.rb b/test/components/previews/section_component_preview.rb
new file mode 100644
index 00000000..927708e6
--- /dev/null
+++ b/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
diff --git a/test/components/section_component_test.rb b/test/components/section_component_test.rb
new file mode 100644
index 00000000..05eea3a7
--- /dev/null
+++ b/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

From 48494bd17d0aca308f0913fb393c671cefb142c5 Mon Sep 17 00:00:00 2001
From: Chris Lowis <chris.lowis@gmail.com>
Date: Fri, 9 Aug 2024 16:25:57 +0100
Subject: [PATCH 2/3] Restyle SectionComponent

To more closely match the designs we have in Figma.
---
 .../section_component/section_component.html.erb   | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/app/components/section_component/section_component.html.erb b/app/components/section_component/section_component.html.erb
index 3b1df632..4a78f033 100644
--- a/app/components/section_component/section_component.html.erb
+++ b/app/components/section_component/section_component.html.erb
@@ -1,9 +1,9 @@
-<section class="mt-6 mb-12">
-  <h2 class="text-slate-400 mb-3 uppercase"><%= @title %></h2>
-
-  <%= content %>
-
-  <div class="flex justify-end">
-    <%= text_link_to @link_text, @link_path %>
+<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>

From c2343e797fe1d5eec8245c9083a851920977b812 Mon Sep 17 00:00:00 2001
From: Chris Lowis <chris.lowis@gmail.com>
Date: Fri, 9 Aug 2024 16:28:12 +0100
Subject: [PATCH 3/3] Change link text in homepage SectionComponent

---
 app/views/interests/new.html.erb | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/views/interests/new.html.erb b/app/views/interests/new.html.erb
index ab6b0c0e..daa613e7 100644
--- a/app/views/interests/new.html.erb
+++ b/app/views/interests/new.html.erb
@@ -13,7 +13,7 @@
 <%= render(
   SectionComponent.new(
     title: 'Recently purchased',
-    link_text: "Discover #{Artist.listed.count} more artists",
+    link_text: "View All",
     link_path: artists_path)
 ) do %>
   <div class="grid grid-cols-4 gap-4 mb-3">