From dc9581e67a936adcba7bd844accf9c1813e763c3 Mon Sep 17 00:00:00 2001
From: Ray C <rayc2045@gmail.com>
Date: Thu, 9 May 2024 22:36:56 +0800
Subject: [PATCH] Add cart button

---
 src/images/svg/bag.svg   |   1 +
 src/pages/shop/shop.html | 144 +++++++++++++++++++++------------------
 2 files changed, 77 insertions(+), 68 deletions(-)
 create mode 100644 src/images/svg/bag.svg

diff --git a/src/images/svg/bag.svg b/src/images/svg/bag.svg
new file mode 100644
index 0000000..056bfbe
--- /dev/null
+++ b/src/images/svg/bag.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1.25em" height="1.25em" viewBox="0 0 24 24"><path fill="currentColor" d="M19 7h-3V6a4 4 0 0 0-8 0v1H5a1 1 0 0 0-1 1v11a3 3 0 0 0 3 3h10a3 3 0 0 0 3-3V8a1 1 0 0 0-1-1m-9-1a2 2 0 0 1 4 0v1h-4Zm8 13a1 1 0 0 1-1 1H7a1 1 0 0 1-1-1V9h2v1a1 1 0 0 0 2 0V9h4v1a1 1 0 0 0 2 0V9h2Z"/></svg>
\ No newline at end of file
diff --git a/src/pages/shop/shop.html b/src/pages/shop/shop.html
index fb4eda5..f20ddb1 100644
--- a/src/pages/shop/shop.html
+++ b/src/pages/shop/shop.html
@@ -56,12 +56,7 @@
           }"
           x-text="`${length} product${length > 1 ? 's' : ''}`"
         ></div>
-        <button
-          class="p-3 aspect-square rounded-full flex justify-center items-center text-gray-500 hover:text-gray-700 bg-gray-200 hover:bg-gray-300/80 transition"
-          @click="filter.hide()"
-        >
-          ✕
-        </button>
+        <button :class="btn.roundedLight" @click="filter.hide()">✕</button>
       </section>
       <div
         x-html="component('products-filter')"
@@ -86,75 +81,88 @@
               lowerName: product.name.toLowerCase().replaceAll(' ', '_'),
               currentColor: product.colors[0],
             }"
-            :class="product.stock !== 'in stock' && 'disabled'"
+            :class="product.stock !== 'in stock' && 'cursor-not-allowed'"
           >
-            <a
-              :href="`#/shop/${product.category}/${lowerName}?color=${currentColor}`"
-              class="block rounded-md overflow-hidden"
-            >
-              <img
-                :src="`./src/images/products/${lowerName}_${currentColor}.png`"
-                :alt="product.name"
-                loading="lazy"
-                class="min-w-full hover:brightness-95 transition duration-300"
-              />
-            </a>
+            <div :class="product.stock !== 'in stock' && 'disabled'">
+              <a
+                :href="`#/shop/${product.category}/${lowerName}?color=${currentColor}`"
+                class="block rounded-md overflow-hidden relative"
+              >
+                <img
+                  :src="`./src/images/products/${lowerName}_${currentColor}.png`"
+                  :alt="product.name"
+                  loading="lazy"
+                  class="min-w-full hover:brightness-95 transition duration-300"
+                />
+              </a>
 
-            <small class="text-xs font-semibold">
-              <template x-if="product.stock === 'in stock'">
-                <span
-                  x-text="product.label && product.label[0].toUpperCase() + product.label.slice(1)"
-                  class="text-red-500"
-                ></span>
-              </template>
-              <template x-if="product.stock !== 'in stock'">
-                <span
-                  x-text="product.stock[0].toUpperCase() + product.stock.slice(1)"
-                  class="text-blue-500"
-                ></span>
-              </template>
-            </small>
-
-            <a
-              :href="`#/shop/${product.category}/${lowerName}?color=${currentColor}`"
-              class="block mb-1"
-              :class="(product.stock === 'in stock' && !product.label.length) && 'mt-5'"
-            >
-              <h3
-                x-text="`${product.name}${product.colors.length > 1 ? ` (${currentColor})` : ''}`"
-                class="font-semibold"
-              ></h3>
-            </a>
+              <div class="flex justify-between items-start">
+                <div id="product-title">
+                  <small class="text-xs font-semibold">
+                    <template x-if="product.stock === 'in stock'">
+                      <span
+                        x-text="product.label && product.label[0].toUpperCase() + product.label.slice(1)"
+                        class="text-red-500"
+                      ></span>
+                    </template>
+                    <template x-if="product.stock !== 'in stock'">
+                      <span
+                        x-text="product.stock[0].toUpperCase() + product.stock.slice(1)"
+                        class="text-blue-500"
+                      ></span>
+                    </template>
+                  </small>
+                  <a
+                    :href="`#/shop/${product.category}/${lowerName}?color=${currentColor}`"
+                    class="block mb-1"
+                    :class="(product.stock === 'in stock' && !product.label.length) && 'mt-6'"
+                  >
+                    <h3
+                      x-text="`${product.name}${product.colors.length > 1 ? ` (${currentColor})` : ''}`"
+                      class="font-semibold"
+                    ></h3>
+                  </a>
+                </div>
+                <template x-if="product.stock === 'in stock'">
+                  <button
+                    id="cart-button"
+                    x-html="svg('bag')"
+                    class="mt-4 ml-1"
+                    :class="btn.roundedLight"
+                  ></button>
+                </template>
+              </div>
 
-            <div class="space-x-1">
-              <span
-                :class="product.discount && 'line-through text-gray-400'"
-                x-text="`$${product.price}`"
-              ></span>
-              <template x-if="product.discount">
+              <div id="product-price" class="space-x-1">
                 <span
-                  x-text="`$${Math.round(product.price * (100 - product.discount.split('%')[0]) / 100) }`"
-                  class="text-gray-600"
+                  :class="product.discount && 'line-through text-gray-400'"
+                  x-text="`$${product.price}`"
                 ></span>
-                <span
-                  x-text="`-${product.discount}`"
-                  class="px-2 rounded-xl text-xs text-red-600 border border-red-600"
-                ></span>
-              </template>
-            </div>
-
-            <template x-if="product.colors.length > 1">
-              <div class="mt-3 flex gap-x-1.5">
-                <template x-for="color in product.colors" :key="color">
-                  <button
-                    class="w-5 aspect-square rounded-full border border-gray-500 pointer"
-                    :class="color"
-                    :title="color"
-                    @click="currentColor = color"
-                  ></button>
+                <template x-if="product.discount">
+                  <span
+                    x-text="`$${Math.round(product.price * (100 - product.discount.split('%')[0]) / 100) }`"
+                    class="text-gray-600"
+                  ></span>
+                  <span
+                    x-text="`-${product.discount}`"
+                    class="px-2 rounded-xl text-xs text-red-600 border border-red-600"
+                  ></span>
                 </template>
               </div>
-            </template>
+
+              <template x-if="product.colors.length > 1">
+                <div id="product-colors" class="mt-3 flex gap-x-1.5">
+                  <template x-for="color in product.colors" :key="color">
+                    <button
+                      class="w-5 aspect-square rounded-full border border-gray-500 pointer"
+                      :class="color"
+                      :title="color"
+                      @click="currentColor = color"
+                    ></button>
+                  </template>
+                </div>
+              </template>
+            </div>
           </li>
         </template>
       </ul>