DRY Tailwind Class duplication into btn/1 function #166

dwyl · Jul 30, 2023 · f2767bf · f2767bf
1 parent 3a8ae45
commit f2767bf
Showing 1 changed file with 7 additions and 2 deletions.
diff --git a/lib/counter_web/live/counter_component.ex b/lib/counter_web/live/counter_component.ex
@@ -1,14 +1,19 @@
 defmodule CounterComponent do
   use Phoenix.LiveComponent
 
+  # Avoid duplicating the Tailwind Classes and show hot to inline a function call:
+  defp btn(color) do
+    "text-6xl pb-2 w-20 rounded-lg bg-#{color}-500 hover:bg-#{color}-600"
+  end
+
   def render(assigns) do
     ~H"""
     <div class="text-center">
       <h1 class="text-4xl font-bold text-center"> Counter: <%= @val %> </h1>
-      <button phx-click="dec" class="text-6xl pb-2 w-20 bg-red-500 hover:bg-red-600 rounded-lg">
+      <button phx-click="dec" class={btn("red")}>
         -
       </button>
-      <button phx-click="inc" class="text-6xl pb-2 w-20 bg-green-500 hover:bg-green-600 rounded-lg">
+      <button phx-click="inc" class={btn("green")}>
         +
       </button>
     </div>