[#27] Add style to keyword groups

app/assets/stylesheets/application.scss

@@ -15,5 +15,6 @@
 @import 'layouts/default';
 
 // Components
+@import 'components/list_keywords_group';
 
 // Screens

app/assets/stylesheets/components/_list_keywords_group.scss

@@ -0,0 +1,6 @@
+.list-keywords-group {
+  &__header {
+    color: $gray-500;
+    min-width: 3em;
+  }
+}

app/decorators/keywords_decorator.rb

@@ -5,7 +5,7 @@ def initialize(keywords)
     @keywords = keywords
   end
 
-  def sections
+  def groups
     @keywords.group_by { |keyword| keyword.name[0].upcase.to_sym }
   end
 end

app/views/keywords/_list_keywords.html.erb

@@ -0,0 +1,8 @@
+<section class="list-keywords">
+  <% keywords.groups.each do |group_key, group_keywords| %>
+    <%= render partial: 'list_keywords_group', locals: { group_key: group_key, group_keywords: group_keywords } %>
+  <% end %>
+  <div class="d-flex justify-content-around">
+    <%== pagy_bootstrap_nav(pagy) %>
+  </div>
+</section>

app/views/keywords/_list_keywords_group.html.erb

@@ -0,0 +1,13 @@
+<div class="d-flex flex-row list-keywords-group mb-2">
+  <div class="list-keywords-group__header">
+    <h2 class="mb-0">
+      <%= group_key %>
+    </h2>
+  </div>
+  <ul class="list-inline mb-0">
+    <% group_keywords.each do |keyword| %>
+      <li class="list-inline-item"><%= keyword.name %></li>
+    <% end %>
+  </ul>
+</div>
+<hr/>

app/views/keywords/index.html.erb

@@ -1,13 +1,3 @@
 <div class="container">
-  <% keywords.sections.each do |key, section| %>
-    <div class="d-flex flex-row">
-      <h2><%= key %></h2>
-      <ul class="list-inline">
-        <% section.each do |keyword| %>
-          <li class="list-inline-item"><%= keyword.name %></li>
-        <% end %>
-      </ul>
-    </div>
-  <% end %>
-  <%== pagy_bootstrap_nav(pagy) %>
+  <%= render partial: 'list_keywords', locals: { keywords: keywords, pagy: pagy } %>
 </div>