tag colors

views/shopitems.html

@@ -2,27 +2,58 @@
   <div class="mx-auto max-w-2xl px-4 py-16 sm:px-6 sm:py-24 lg:max-w-7xl lg:px-8">
     <h2 class="text-2xl font-bold tracking-tight text-gray-900">Available Zines</h2>
 
+    <input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for names..">
   <div class="mt-6 grid grid-cols-1 gap-x-6 gap-y-10 sm:grid-cols-2 lg:grid-cols-4 xl:gap-x-8">
   {{ range .data.shopItems }}
 
-    <div class="group relative">
+    <div class="myClass group relative">
+            <a href="/shopitems/{{ .ID }}">
       <img src="/{{ .Image }}" alt="Product Image" class="aspect-4/5 w-full rounded-md bg-gray-200 object-cover group-hover:opacity-75 lg:aspect-auto lg:h-80">
+            </a>
       <div class="mt-4 flex justify-between">
         <div>
           <h3 class="text-sm text-gray-700">
             <a href="/shopitems/{{ .ID }}">
-              <span aria-hidden="true" class="absolute inset-0"></span>
               {{ .Name }}
             </a>
           </h3>
           <p class="mt-1 text-sm text-gray-500">{{ .Abstract }}</p>
-          <p class="mt-1 text-sm text-gray-500">{{ range .Tags }}{{ .Name }} {{ end }}</p>
+
+          <p class="mt-1 text-sm text-gray-500">
+            {{ range .Tags }}
+            <a href="/tags/{{ .ID }}"><span class="bg-{{ .Color }}-100 text-{{ .Color }}-800 text-xs font-medium me-2 px-2.5 py-0.5 rounded-sm dark:bg-{{ .Color }}-900 dark:text-{{ .Color }}-300">{{ .Name }}</span></a>
+            {{ end }}
+          </p>
         </div>
         <p class="text-sm font-medium text-gray-900">{{ .BasePrice }}€</p>
       </div>
     </div>
 
   {{ end }}
+
+<script>
+function myFunction() {
+  // Declare variables
+  var input, filter, ul, li, a, i, txtValue;
+  input = document.getElementById('myInput');
+  filter = input.value.toUpperCase();
+  //ul = document.getElementById("myUL");
+  //li = ul.getElementsByTagName('li');
+  li = document.getElementsByClassName("myClass");
+
+  console.log(li)
+  // Loop through all list items, and hide those who don't match the search query
+  for (i = 0; i < li.length; i++) {
+    a = li[i].getElementsByTagName("a")[1];
+    txtValue = a.textContent || a.innerText;
+    if (txtValue.toUpperCase().indexOf(filter) > -1) {
+      li[i].style.display = "";
+    } else {
+      li[i].style.display = "none";
+    }
+  }
+}
+</script>
     </div>
     </div>
     </div>

views/tagview.html

@@ -12,7 +12,36 @@
     <form action="/tags/{{ .ID }}" method="POST">
       <div class="max-w-md mx-auto mt-4">
         <div class="flex">
+
+          <span class="bg-{{ .Color }}-100 text-{{ .Color }}-800 text-xs font-medium me-2 px-2.5 py-0.5 rounded-sm
+            dark:bg-{{ .Color }}-900 dark:text-{{ .Color }}-300">Preview</span>
           <input type="text" id="name" name="name" value="{{ .Name }}" class="flex-grow border border-gray-300 rounded-l-md p-2 focus:outline-none focus:ring focus:ring-blue-500">
+          <select name="color" required>
+            <option selected value="{{ .Color }}">{{ .Color }}</option>
+            <option value="1">Default</option>
+            <option value="red">red</option>
+            <option value="orange">orange</option>
+            <option value="amber">amber</option>
+            <option value="yellow">yellow</option>
+            <option value="lime">lime</option>
+            <option value="green">green</option>
+            <option value="emerald">emerald</option>
+            <option value="teal">teal</option>
+            <option value="cyan">cyan</option>
+            <option value="sky">sky</option>
+            <option value="blue">blue</option>
+            <option value="indigo">indigo</option>
+            <option value="violet">violet</option>
+            <option value="purple">purple</option>
+            <option value="fuchsia">fuchsia</option>
+            <option value="pink">pink</option>
+            <option value="rose">rose</option>
+            <option value="slate">slate</option>
+            <option value="gray">gray</option>
+            <option value="zinc">zinc</option>
+            <option value="neutral">neutral</option>
+            <option value="stone">stone</option>
+          </select>
           <button type="submit" name="action" value="update" class="bg-blue-600 text-white ml-4 mr-4 rounded px-4 hover:bg-blue-700">Update</button>
           <button type="submit" name="action" value="delete" class="bg-red-800 text-white rounded px-4 hover:bg-red-900">Delete</button>
         </div>