From f2767bf979c1be5271a651a51c2435582f8b36f4 Mon Sep 17 00:00:00 2001
From: nelsonic <nelson+github@dwyl.com>
Date: Sun, 30 Jul 2023 07:52:18 +0100
Subject: [PATCH] DRY Tailwind Class duplication into btn/1 function #166

---
 lib/counter_web/live/counter_component.ex | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/lib/counter_web/live/counter_component.ex b/lib/counter_web/live/counter_component.ex
index 21f381b6..1c3dcd6f 100644
--- 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>