chore: Create separate component for basic display of a code

lib/medical_transcription_web/components/code_select.ex

@@ -5,7 +5,7 @@ defmodule MedicalTranscriptionWeb.Components.CodeSelect do
 
   alias MedicalTranscription.Feedback
   use MedicalTranscriptionWeb, :live_component
-  import MedicalTranscriptionWeb.Components, only: [tag_result: 1]
+  import MedicalTranscriptionWeb.Components, only: [code_display: 1]
 
   @impl Phoenix.LiveComponent
   def mount(socket) do
@@ -54,23 +54,18 @@ defmodule MedicalTranscriptionWeb.Components.CodeSelect do
           </div>
         <% end %>
       <% else %>
-        <div class="flex justify-between">
-          <p class="leading-normal font-bold text-type-black-primary uppercase">
-            User-selected code
-          </p>
-          <button type="button" phx-click="clear-code" phx-target={@myself}>
-            <.icon name="hero-x-circle" />
-          </button>
-        </div>
+        <div class="px-[14px]">
+          <div class="flex justify-between pb-1 border-b border-zinc-300">
+            <p class="leading-normal font-bold text-type-black-primary uppercase">
+              User-selected code
+            </p>
+            <button type="button" phx-click="clear-code" phx-target={@myself}>
+              <.icon name="hero-x-circle" />
+            </button>
+          </div>
 
-        <.tag_result
-          code_vector_id={@selected_code.id}
-          text=""
-          score={1.0}
-          weighting={[]}
-          code={@selected_code.code}
-          label={@selected_code.description}
-        />
+          <.code_display code={@selected_code.code} label={@selected_code.description} />
+        </div>
       <% end %>
     </div>
     """

lib/medical_transcription_web/components/components.ex

@@ -175,6 +175,15 @@ defmodule MedicalTranscriptionWeb.Components do
     """
   end
 
+  def code_display(assigns) do
+    ~H"""
+    <div class="py-4 text-sm flex flex-col gap-1 font-secondary text-type-black-primary rounded">
+      <p class="text-lg font-bold leading-[22.97px]"><%= @code %></p>
+      <p class="text-base leading-[20.42px]"><%= @label %></p>
+    </div>
+    """
+  end
+
   def code_color(weighting) do
     cond do
       :positive in weighting and :negative in weighting -> "bg-orange-200/40"