From 7156b49255a0f9df6ac7e156c8012d208c5014dd Mon Sep 17 00:00:00 2001
From: Matthew Landauer <mlandauer@gmail.com>
Date: Mon, 23 Oct 2023 06:17:47 +0000
Subject: [PATCH] Extract speech bubble component

---
 .../tailwind/speech_bubble_component.html.erb          | 10 ++++++++++
 app/components/tailwind/speech_bubble_component.rb     |  7 +++++++
 app/views/_tailwind/applications/show.html.erb         |  9 ++-------
 3 files changed, 19 insertions(+), 7 deletions(-)
 create mode 100644 app/components/tailwind/speech_bubble_component.html.erb
 create mode 100644 app/components/tailwind/speech_bubble_component.rb

diff --git a/app/components/tailwind/speech_bubble_component.html.erb b/app/components/tailwind/speech_bubble_component.html.erb
new file mode 100644
index 000000000..f8b598cef
--- /dev/null
+++ 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
new file mode 100644
index 000000000..9656b6d2e
--- /dev/null
+++ 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
index 75501a31b..ce90588b7 100644
--- 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 %>