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>