Extract speech bubble component

openaustralia · Oct 23, 2023 · 7156b49 · 7156b49
1 parent 9251564
commit 7156b49
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 7 deletions.
diff --git a/app/components/tailwind/speech_bubble_component.html.erb b/app/components/tailwind/speech_bubble_component.html.erb
@@ -0,0 +1,10 @@
+<div class="relative inline-block">
+  <div class="inline-block px-4 py-2 text-4xl font-bold text-white rounded-2xl bg-lavender">
+    <%= content %>
+  </div>
+  <div class="w-0 h-0 absolute right-4
+    border-l-[6px] border-l-transparent
+    border-t-[14px] border-t-lavender
+    border-r-[6px] border-r-transparent">
+  </div>
+</div>
diff --git a/app/components/tailwind/speech_bubble_component.rb b/app/components/tailwind/speech_bubble_component.rb
@@ -0,0 +1,7 @@
+# typed: strict
+# frozen_string_literal: true
+
+module Tailwind
+  class SpeechBubbleComponent < ViewComponent::Base
+  end
+end
diff --git a/app/views/_tailwind/applications/show.html.erb b/app/views/_tailwind/applications/show.html.erb
@@ -138,14 +138,9 @@
   <h2 class="inline-block mb-6 text-3xl font-bold text-navy font-display">Comments on this application</h2>
   <% if @comments.count > 0 %>
     <div class="relative inline-block ml-4 -top-6">
-      <div class="inline-block px-4 py-2 text-4xl font-bold text-white rounded-2xl bg-lavender">
+      <%= render Tailwind::SpeechBubbleComponent.new do %>
         <%= @comments.count %>
-      </div>
-      <div class="w-0 h-0 absolute right-4
-        border-l-[6px] border-l-transparent
-        border-t-[14px] border-t-lavender
-        border-r-[6px] border-r-transparent">
-      </div>
+      <% end %>
     </div>
   <% end %>