From dda355e764ac9213ee18da7e554ceffb8f9d414a Mon Sep 17 00:00:00 2001
From: Claudio Ortolina <cloud8421@gmail.com>
Date: Wed, 14 May 2025 10:47:01 +0100
Subject: [PATCH] Refactor to create .nav_link component

---
 lib/music_library_web/components/layouts.ex   | 31 ++++++++++++-------
 .../components/layouts/app.html.heex          | 20 ++++++------
 .../live/collection_live/index.ex             |  2 +-
 .../live/collection_live/show.ex              |  2 +-
 4 files changed, 30 insertions(+), 25 deletions(-)

diff --git a/lib/music_library_web/components/layouts.ex b/lib/music_library_web/components/layouts.ex
index a402852f..4a72900d 100644
--- a/lib/music_library_web/components/layouts.ex
+++ b/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"
-  @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"
-  @nav_active_classes "border-red-500 text-zinc-900 dark:text-zinc-100"
+  attr :nav_section, :atom, required: true
+  attr :section, :atom, required: true
+  attr :route, :string, required: true
 
-  def section_link_classes(current_section, section) when current_section == section do
-    [@nav_base_classes, @nav_active_classes]
-  end
+  slot :inner_block, required: true
 
-  def section_link_classes(_current_section, _section) do
-    [@nav_base_classes, @nav_inactive_classes]
-  end
-
-  def nav_link_classes do
-    [@nav_base_classes, @nav_inactive_classes]
+  def nav_link(assigns) do
+    ~H"""
+    <.link
+      navigate={@route}
+      class={[
+        "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
diff --git a/lib/music_library_web/components/layouts/app.html.heex b/lib/music_library_web/components/layouts/app.html.heex
index ff391301..b604585a 100644
--- a/lib/music_library_web/components/layouts/app.html.heex
+++ b/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>
-          <.link
-            navigate={~p"/collection"}
-            class={section_link_classes(assigns[:nav_section], :records)}
+          </.nav_link>
+          <.nav_link
+            route={~p"/collection"}
+            section={:collection}
+            nav_section={assigns[:nav_section]}
           >
             <.icon
               name="hero-circle-stack"
@@ -24,11 +25,8 @@
               data-slot="icon"
             />
             {gettext("Collection")}
-          </.link>
-          <.link
-            navigate={~p"/wishlist"}
-            class={section_link_classes(assigns[:nav_section], :wishlist)}
-          >
+          </.nav_link>
+          <.nav_link route={~p"/wishlist"} section={:wishlist} nav_section={assigns[:nav_section]}>
             <.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">
diff --git a/lib/music_library_web/live/collection_live/index.ex b/lib/music_library_web/live/collection_live/index.ex
index 9eef2e51..52cbb55a 100644
--- a/lib/music_library_web/live/collection_live/index.ex
+++ b/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
diff --git a/lib/music_library_web/live/collection_live/show.ex b/lib/music_library_web/live/collection_live/show.ex
index 9eebcbbd..968ddc4f 100644
--- a/lib/music_library_web/live/collection_live/show.ex
+++ b/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