From bd20d4001b99ee43f5ea770e0b039ea53d8a1423 Mon Sep 17 00:00:00 2001
From: Chris Sexton <3216719+chrissexton@users.noreply.github.com>
Date: Wed, 28 Feb 2024 09:52:49 -0500
Subject: [PATCH] counter: use foundation

---
 plugins/counter/counter.templ    | 44 +++++++++++++++++++-------------
 plugins/counter/counter_templ.go | 30 ++++++++++------------
 2 files changed, 39 insertions(+), 35 deletions(-)

diff --git a/plugins/counter/counter.templ b/plugins/counter/counter.templ
index 7012bf5..3bdec65 100644
--- a/plugins/counter/counter.templ
+++ b/plugins/counter/counter.templ
@@ -15,44 +15,52 @@ func (p *CounterPlugin) allItems() map[string][]Item {
 }
 
 templ (p *CounterPlugin) index() {
-    <div class="container">
-        <div class="row">
-            <label>Password: <input type="text" name="password" /></label>
+    <div class="grid-container">
+        <div class="grid-x">
+            <h2>Counter</h2>
         </div>
-        for user, items := range p.allItems() {
-            <div class="row">
-                { user }:
-                <div class="container">
+        <div class="grid-x">
+            <div class="input-group">
+              <span class="input-group-label">Password</span>
+              <input class="input-group-field" type="text" name="password" />
+            </div>
+        </div>
+        <table>
+            for user, items := range p.allItems() {
+                <tr><th class="text-left" colspan="3">{ user }</th></tr>
                 for _, thing := range items {
                     @p.renderItem(user, thing)
                 }
-                </div>
-            </div>
-        }
+            }
+        </table>
     </div>
 }
 
 templ (p *CounterPlugin) renderItem(user string, item Item) {
-    <div class="row" id={ fmt.Sprintf("item%d", item.ID) }>
-        <div class="col offset-1">
+    <tr id={ fmt.Sprintf("item%d", item.ID) }>
+        <td>
             { item.Item }
-        </div>
-        <div class="col">
+        </td>
+        <td>
             { fmt.Sprintf("%d", item.Count) }
-        </div>
-        <div class="col-2">
+        </td>
+        <td>
             <button
+                class="button tiny alert"
+                style="vertical-align: baseline"
                 hx-target={ "#"+fmt.Sprintf("item%d", item.ID) }
                 hx-include="[name='password']"
                 hx-swap="outerHTML"
                 hx-post={ urlFor(user, item.Item, "decrement") }
             >-</button>
             <button
+                class="button tiny success"
+                style="vertical-align: baseline"
                 hx-target={ "#"+fmt.Sprintf("item%d", item.ID) }
                 hx-include="[name='password']"
                 hx-swap="outerHTML"
                 hx-post={ urlFor(user, item.Item, "increment") }
             >+</button>
-        </div>
-    </div>
+        </td>
+    </tr>
 }
\ No newline at end of file
diff --git a/plugins/counter/counter_templ.go b/plugins/counter/counter_templ.go
index dc45771..9cd4946 100644
--- a/plugins/counter/counter_templ.go
+++ b/plugins/counter/counter_templ.go
@@ -37,25 +37,25 @@ func (p *CounterPlugin) index() templ.Component {
 			templ_7745c5c3_Var1 = templ.NopComponent
 		}
 		ctx = templ.ClearChildren(ctx)
-		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<div class=\"container\"><div class=\"row\"><label>Password: <input type=\"text\" name=\"password\"></label></div>")
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<div class=\"grid-container\"><div class=\"grid-x\"><h2>Counter</h2></div><div class=\"grid-x\"><div class=\"input-group\"><span class=\"input-group-label\">Password</span> <input class=\"input-group-field\" type=\"text\" name=\"password\"></div></div><table>")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
 		for user, items := range p.allItems() {
-			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<div class=\"row\">")
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<tr><th class=\"text-left\" colspan=\"3\">")
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
 			var templ_7745c5c3_Var2 string
 			templ_7745c5c3_Var2, templ_7745c5c3_Err = templ.JoinStringErrs(user)
 			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `plugins/counter/counter.templ`, Line: 23, Col: 22}
+				return templ.Error{Err: templ_7745c5c3_Err, FileName: `plugins/counter/counter.templ`, Line: 29, Col: 60}
 			}
 			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var2))
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
-			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(":<div class=\"container\">")
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</th></tr>")
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
@@ -65,12 +65,8 @@ func (p *CounterPlugin) index() templ.Component {
 					return templ_7745c5c3_Err
 				}
 			}
-			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</div></div>")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
 		}
-		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</div>")
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</table></div>")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
@@ -94,7 +90,7 @@ func (p *CounterPlugin) renderItem(user string, item Item) templ.Component {
 			templ_7745c5c3_Var3 = templ.NopComponent
 		}
 		ctx = templ.ClearChildren(ctx)
-		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<div class=\"row\" id=\"")
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<tr id=\"")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
@@ -102,33 +98,33 @@ func (p *CounterPlugin) renderItem(user string, item Item) templ.Component {
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
-		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\"><div class=\"col offset-1\">")
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\"><td>")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
 		var templ_7745c5c3_Var4 string
 		templ_7745c5c3_Var4, templ_7745c5c3_Err = templ.JoinStringErrs(item.Item)
 		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `plugins/counter/counter.templ`, Line: 37, Col: 23}
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `plugins/counter/counter.templ`, Line: 41, Col: 23}
 		}
 		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var4))
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
-		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</div><div class=\"col\">")
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</td><td>")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
 		var templ_7745c5c3_Var5 string
 		templ_7745c5c3_Var5, templ_7745c5c3_Err = templ.JoinStringErrs(fmt.Sprintf("%d", item.Count))
 		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `plugins/counter/counter.templ`, Line: 40, Col: 43}
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `plugins/counter/counter.templ`, Line: 44, Col: 43}
 		}
 		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var5))
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
-		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</div><div class=\"col-2\"><button hx-target=\"")
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</td><td><button class=\"button tiny alert\" style=\"vertical-align: baseline\" hx-target=\"")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
@@ -144,7 +140,7 @@ func (p *CounterPlugin) renderItem(user string, item Item) templ.Component {
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
-		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\">-</button> <button hx-target=\"")
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\">-</button> <button class=\"button tiny success\" style=\"vertical-align: baseline\" hx-target=\"")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
@@ -160,7 +156,7 @@ func (p *CounterPlugin) renderItem(user string, item Item) templ.Component {
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
-		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\">+</button></div></div>")
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\">+</button></td></tr>")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}