make it the same counter app

Author: cgsdev0

examples/tailwind/config.sh

@@ -1 +1,2 @@
+PROJECT_NAME="Tailwind Counter"
 TAILWIND=on

examples/tailwind/pages/count.sh

@@ -0,0 +1,16 @@
+
+if [[ ! -f data/count ]]; then
+  echo "0" > data/count
+fi
+
+COUNT=$(cat data/count)
+
+if [[ "$REQUEST_METHOD" == "POST" ]]; then
+  # increment the count
+  COUNT=$(( COUNT + 1 ))
+  echo "$COUNT" > data/count
+fi
+
+htmx_page << EOF
+  <p id="count" class="mt-3" hx-swap-oob="true">$COUNT</p>
+EOF

examples/tailwind/pages/index.sh

@@ -1,6 +1,9 @@
 
+source config.sh
+
 htmx_page << EOF
-  <h1 class="text-green-500 text-3xl font-bold underline">
-    Hello world!
-  </h1>
+  <h1 class="text-blue-500 text-4xl mt-3 mb-3">${PROJECT_NAME}</h1>
+  <button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded" hx-post="/count" hx-swap="none">Count</button>
+  <button class="bg-red-500 hover:bg-red-700 text-white font-bold py-2 px-4 rounded" hx-post="/reset" hx-swap="none">Reset</button>
+  $(component '/count')
 EOF

examples/tailwind/pages/list.sh

@@ -0,0 +1,8 @@
+if [[ "$REQUEST_METHOD" != "POST" ]]; then
+  # only allow POST to this endpoint
+  return $(status_code 405)
+fi
+
+echo "0" > data/count
+
+component '/count'

examples/tailwind/pages/reset.sh

@@ -534,22 +534,73 @@ video {
   --tw-backdrop-sepia:  ;
 }
 
+.mt-2 {
+  margin-top: 0.5rem;
+}
+
+.mt-3 {
+  margin-top: 0.75rem;
+}
+
+.mb-3 {
+  margin-bottom: 0.75rem;
+}
+
+.rounded {
+  border-radius: 0.25rem;
+}
+
+.border-2 {
+  border-width: 2px;
+}
+
+.bg-blue-500 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(59 130 246 / var(--tw-bg-opacity));
+}
+
+.bg-red-500 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(239 68 68 / var(--tw-bg-opacity));
+}
+
+.px-4 {
+  padding-left: 1rem;
+  padding-right: 1rem;
+}
+
+.py-2 {
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
+}
+
+.text-xl {
+  font-size: 1.25rem;
+  line-height: 1.75rem;
+}
+
 .text-3xl {
   font-size: 1.875rem;
   line-height: 2.25rem;
 }
 
+.text-4xl {
+  font-size: 2.25rem;
+  line-height: 2.5rem;
+}
+
 .font-bold {
   font-weight: 700;
 }
 
-.text-green-500 {
+.text-blue-500 {
   --tw-text-opacity: 1;
-  color: rgb(34 197 94 / var(--tw-text-opacity));
+  color: rgb(59 130 246 / var(--tw-text-opacity));
 }
 
-.underline {
-  text-decoration-line: underline;
+.text-white {
+  --tw-text-opacity: 1;
+  color: rgb(255 255 255 / var(--tw-text-opacity));
 }
 
 body {
@@ -591,3 +642,13 @@ body {
 #count {
   font-size: 24px;
 }
+
+.hover\:bg-blue-700:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(29 78 216 / var(--tw-bg-opacity));
+}
+
+.hover\:bg-red-700:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(185 28 28 / var(--tw-bg-opacity));
+}

examples/tailwind/static/tailwind.css

@@ -1,8 +1,6 @@
 /** @type {import('tailwindcss').Config} */
 module.exports = {
   content: ["./pages/**/*.sh"],
-  theme: {
-    extend: {},
-  },
+  theme: {},
   plugins: [],
-}
+};