Add product color switching

src/pages/shop/shop.html

@@ -5,8 +5,7 @@
       class="mb-8 text-gray-500"
     ></div>
     <ul
-      class="sm:grid place-content-center gap-x-8 gap-y-16 tracking-wide"
-      style="grid-template-columns: repeat(auto-fit, 18em)"
+      class="grid place-content-center grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-x-8 gap-y-12 tracking-wide"
     >
       <template x-for="product in shop.filteredProducts" :key="product.name">
         <li
@@ -25,16 +24,18 @@
               class="min-w-full"
             />
           </a>
+
           <div
             x-text="product.label && product.label[0].toUpperCase() + product.label.slice(1)"
             class="text-red-500 text-xs font-semibold"
           ></div>
           <a
             :href="`#/shop/${product.category}/${lowerName}`"
-            x-text="product.name"
-            class="block mb-2 text-lg font-semibold"
+            x-text="`${product.name}${product.colors.length > 1 && ` (${currentColor})`}`"
+            class="block mb-1 text-lg font-semibold"
             :class="!product.label.length && 'mt-5'"
           ></a>
+
           <div class="space-x-1">
             <span
               :class="product.discount && 'line-through text-gray-400'"
@@ -50,6 +51,19 @@
               class="px-2 rounded-xl text-xs text-red-600 border border-red-600"
             ></span>
           </div>
+
+          <template x-if="product.colors.length > 1">
+            <div class="mt-3 flex gap-x-1.5">
+              <template x-for="color in product.colors">
+                <button
+                  class="w-5 aspect-square rounded-full border border-gray-500 pointer"
+                  :class="color"
+                  :title="color"
+                  @click="currentColor = color"
+                ></button>
+              </template>
+            </div>
+          </template>
         </li>
       </template>
     </ul>

src/style.css

@@ -19,3 +19,27 @@ body {
 #side-menu::-webkit-scrollbar {
   width: 0;
 }
+
+.white {
+  background-color: ghostwhite;
+}
+
+.gray {
+  background-color: gray;
+}
+
+.black {
+  background-color: #333;
+}
+
+.amber {
+  background-color: peru;
+}
+
+.green {
+  background-color: olivedrab;
+}
+
+.blue {
+  background-color: steelblue;
+}