Refactor to create .nav_link component

lib/music_library_web/components/layouts.ex

@@ -12,19 +12,26 @@ defmodule MusicLibraryWeb.Layouts do
 
   embed_templates "layouts/*"
 
-  @nav_base_classes "inline-flex items-center border-b-2 px-1 pt-1 text-sm font-medium"
+  attr :nav_section, :atom, required: true
-  @nav_inactive_classes "border-transparent text-zinc-500 hover:border-red-300 hover:text-zinc-700 dark:text-zinc-300 dark:hover:text-zinc-200 dark:hover:border-red-700"
+  attr :section, :atom, required: true
-  @nav_active_classes "border-red-500 text-zinc-900 dark:text-zinc-100"
+  attr :route, :string, required: true
 
-  def section_link_classes(current_section, section) when current_section == section do
+  slot :inner_block, required: true
-    [@nav_base_classes, @nav_active_classes]
-  end
 
-  def section_link_classes(_current_section, _section) do
+  def nav_link(assigns) do
-    [@nav_base_classes, @nav_inactive_classes]
+    ~H"""
-  end
+    <.link
-
+      navigate={@route}
-  def nav_link_classes do
+      class={[
-    [@nav_base_classes, @nav_inactive_classes]
+        "inline-flex items-center border-b-2 px-1 pt-1 text-sm font-medium",
+        @nav_section == @section &&
+          "border-red-500 text-zinc-900 dark:text-zinc-100",
+        @nav_section !== @section &&
+          "border-transparent text-zinc-500 hover:border-red-300 hover:text-zinc-700 dark:text-zinc-300 dark:hover:text-zinc-200 dark:hover:border-red-700"
+      ]}
+    >
+      {render_slot(@inner_block)}
+    </.link>
+    """
   end
 end

lib/music_library_web/components/layouts/app.html.heex

@@ -4,7 +4,7 @@
     <div class="flex h-16 justify-between">
       <div class="flex">
         <div class="flex space-x-2 md:space-x-4">
-          <.link navigate={~p"/"} class={section_link_classes(assigns[:nav_section], :stats)}>
+          <.nav_link route={~p"/"} section={:stats} nav_section={assigns[:nav_section]}>
             <.icon
               name="hero-chart-pie"
               class="max-sm:hidden h-4 w-4 mr-2"
@@ -12,10 +12,11 @@
               data-slot="icon"
             />
             {gettext("Stats")}
-          </.link>
+          </.nav_link>
-          <.link
+          <.nav_link
-            navigate={~p"/collection"}
+            route={~p"/collection"}
-            class={section_link_classes(assigns[:nav_section], :records)}
+            section={:collection}
+            nav_section={assigns[:nav_section]}
           >
             <.icon
               name="hero-circle-stack"
@@ -24,11 +25,8 @@
               data-slot="icon"
             />
             {gettext("Collection")}
-          </.link>
+          </.nav_link>
-          <.link
+          <.nav_link route={~p"/wishlist"} section={:wishlist} nav_section={assigns[:nav_section]}>
-            navigate={~p"/wishlist"}
-            class={section_link_classes(assigns[:nav_section], :wishlist)}
-          >
             <.icon
               name="hero-star"
               class="max-sm:hidden h-4 w-4 mr-2"
@@ -36,7 +34,7 @@
               data-slot="icon"
             />
             {gettext("Wishlist")}
-          </.link>
+          </.nav_link>
         </div>
       </div>
       <div class="flex space-x-2 md:space-x-4 items-center">

lib/music_library_web/live/collection_live/index.ex

@@ -17,7 +17,7 @@ defmodule MusicLibraryWeb.CollectionLive.Index do
 
   @impl true
   def mount(_params, _session, socket) do
-    {:ok, assign(socket, :nav_section, :records)}
+    {:ok, assign(socket, :nav_section, :collection)}
   end
 
   @impl true

lib/music_library_web/live/collection_live/show.ex

@@ -38,7 +38,7 @@ defmodule MusicLibraryWeb.CollectionLive.Show do
 
     {:noreply,
      socket
-     |> assign(:nav_section, :records)
+     |> assign(:nav_section, :collection)
      |> assign(:page_title, page_title(socket.assigns.live_action, record))
      |> assign(:record, record)}
   end