From bc543c19eb4d7aa01d25c0ea501587895c821496 Mon Sep 17 00:00:00 2001
From: Ray C <rayc2045@gmail.com>
Date: Tue, 7 May 2024 18:44:30 +0800
Subject: [PATCH] Update checkbox

---
 src/pages/shop/shop.html | 424 ++++++++++++++++++++-------------------
 1 file changed, 221 insertions(+), 203 deletions(-)

diff --git a/src/pages/shop/shop.html b/src/pages/shop/shop.html
index 66adcdc..640b6e8 100644
--- a/src/pages/shop/shop.html
+++ b/src/pages/shop/shop.html
@@ -1,220 +1,238 @@
-<div class="flex gap-x-8">
-  <aside id="filter" class="hidden md:block md:w-48 lg:w-64 select-none">
-    <section class="py-8 border-t border-gray-300">
-      <h3 class="text-lg mb-8">Label</h3>
-      <template x-for="item in shop.filter.labels.toSorted()" :key="item">
-        <label
-          :for="`item-${item}`"
-          class="mt-4 flex items-center gap-x-2 cursor-pointer accent-gray-600"
-          @change="shop.filterOption.labels.includes(item) ? shop.filterOption.labels.splice(shop.filterOption.labels.indexOf(item), 1) : shop.filterOption.labels.push(item);"
-        >
-          <input
-            type="checkbox"
-            class="size-5"
-            :id="`item-${item}`"
-            :value="shop.filterOption.labels.includes(item)"
-          />
-          <span
-            x-text="`${item[0].toUpperCase() + item.slice(1)}`"
-            class="text-gray-900"
-          ></span>
-          <span
-            x-text="`(${shop.products.filter(p => p.label === item).length})`"
-            class="text-gray-500"
-          ></span>
-        </label>
-      </template>
-    </section>
-
-    <section class="py-8 border-t border-gray-300">
-      <h3 class="text-lg mb-8">Category</h3>
-      <template x-for="item in shop.filter.categories.toSorted()" :key="item">
-        <label
-          :for="`item-${item}`"
-          class="mt-4 flex items-center gap-x-2 cursor-pointer accent-gray-600"
-          @change="shop.filterOption.categories.includes(item) ? shop.filterOption.categories.splice(shop.filterOption.categories.indexOf(item), 1) : shop.filterOption.categories.push(item);"
-        >
-          <input
-            type="checkbox"
-            class="size-5"
-            :id="`item-${item}`"
-            :value="shop.filterOption.categories.includes(item)"
-          />
-          <span
-            x-text="`${item[0].toUpperCase() + item.slice(1)}`"
-            class="text-gray-900"
-          ></span>
-          <span
-            x-text="`(${shop.products.filter(p => p.category === item).length})`"
-            class="text-gray-500"
-          ></span>
-        </label>
-      </template>
-    </section>
-
-    <section class="py-8 border-t border-gray-300">
-      <h3 class="text-lg mb-8">Discount</h3>
-      <template x-for="item in shop.filter.discounts" :key="item">
-        <label
-          :for="`item-${item}`"
-          class="mt-4 flex items-center gap-x-2 cursor-pointer accent-gray-600"
-          @change="shop.filterOption.discounts.includes(item) ? shop.filterOption.discounts.splice(shop.filterOption.discounts.indexOf(item), 1) : shop.filterOption.discounts.push(item);"
-        >
-          <input
-            type="checkbox"
-            class="size-5"
-            :id="`item-${item}`"
-            :value="shop.filterOption.discounts.includes(item)"
-          />
-          <span
-            x-text="`${item[0].toUpperCase() + item.slice(1)}`"
-            class="text-gray-900"
-          ></span>
-          <span
-            x-text="`(${shop.products.filter(p => p.discount === item).length})`"
-            class="text-gray-500"
-          ></span>
-        </label>
-      </template>
-    </section>
-
-    <section class="py-8 border-t border-gray-300">
-      <h3 class="text-lg mb-8">Color</h3>
-      <template x-for="item in shop.filter.colors.toSorted()" :key="item">
-        <label
-          :for="`item-${item}`"
-          class="mt-4 flex items-center gap-x-2 cursor-pointer accent-gray-600"
-          @change="shop.filterOption.colors.includes(item) ? shop.filterOption.colors.splice(shop.filterOption.colors.indexOf(item), 1) : shop.filterOption.colors.push(item);"
-        >
-          <input
-            type="checkbox"
-            class="size-5"
-            :id="`item-${item}`"
-            :value="shop.filterOption.colors.includes(item)"
-          />
-          <span
-            x-text="`${item[0].toUpperCase() + item.slice(1)}`"
-            class="text-gray-900"
-          ></span>
-          <span
-            x-text="`(${shop.products.filter(p => p.colors.includes(item)).length})`"
-            class="text-gray-500"
-          ></span>
-        </label>
-      </template>
-    </section>
-
-    <section class="py-8 border-t border-gray-300">
-      <h3 class="text-lg mb-8">Stock</h3>
-      <template x-for="item in shop.filter.stocks.toSorted()" :key="item">
-        <label
-          :for="`item-${item}`"
-          class="mt-4 flex items-center gap-x-2 cursor-pointer accent-gray-600"
-          @change="shop.filterOption.stocks.includes(item) ? shop.filterOption.stocks.splice(shop.filterOption.stocks.indexOf(item), 1) : shop.filterOption.stocks.push(item);"
-        >
-          <input
-            type="checkbox"
-            class="size-5"
-            :id="`item-${item}`"
-            :value="shop.filterOption.stocks.includes(item)"
-          />
-          <span
-            x-text="`${item[0].toUpperCase() + item.slice(1)}`"
-            class="text-gray-900"
-          ></span>
-          <span
-            x-text="`(${shop.products.filter(p => p.stock === item).length})`"
-            class="text-gray-500"
-          ></span>
-        </label>
-      </template>
-    </section>
-  </aside>
-  <div class="flex-1">
+<div>
+  <div class="mb-8 flex items-center text-gray-500">
     <div
       x-text="`${shop.filteredProducts.length} product${shop.filteredProducts.length > 1 ? 's' : ''}`"
-      class="mb-8 text-gray-500"
     ></div>
-    <ul
-      class="grid place-content-center grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-x-8 gap-y-12 tracking-wide"
-    >
-      <template x-for="product in shop.filteredProducts" :key="product.name">
-        <li
-          x-data="{
-            lowerName: product.name.toLowerCase().replaceAll(' ', '_'),
-            currentColor: product.colors[0],
-          }"
-          :class="product.stock !== 'in stock' && 'disabled'"
-        >
-          <a
-            :href="`#/shop/${product.category}/${lowerName}?color=${currentColor}`"
-            class="block rounded-md overflow-hidden"
+  </div>
+  <div class="flex gap-x-8">
+    <aside id="products-filter" class="hidden lg:block lg:w-64 select-none">
+      <section class="py-8 border-t border-gray-300">
+        <h3 class="text-lg mb-8">Category</h3>
+        <template x-for="item in shop.filter.categories.toSorted()" :key="item">
+          <label
+            :for="`item-${item}`"
+            class="mt-4 flex items-center gap-x-2 cursor-pointer accent-gray-600"
+            @change="shop.filterOption.categories.includes(item) ? shop.filterOption.categories.splice(shop.filterOption.categories.indexOf(item), 1) : shop.filterOption.categories.push(item);"
           >
-            <img
-              :src="`./src/images/products/${lowerName}_${currentColor}.png`"
-              :alt="product.name"
-              loading="lazy"
-              class="min-w-full hover:brightness-95 transition"
+            <input
+              type="checkbox"
+              class="size-5 sr-only"
+              :id="`item-${item}`"
+              :value="shop.filterOption.categories.includes(item)"
             />
-          </a>
+            <span
+              x-show="!shop.filterOption.categories.includes(item)"
+              x-html="svg('square')"
+              class="text-gray-900"
+            ></span>
+            <span
+              x-show="shop.filterOption.categories.includes(item)"
+              x-html="svg('checkbox')"
+              class="text-gray-700"
+            ></span>
+            <span
+              x-text="`${item[0].toUpperCase() + item.slice(1)}`"
+              class="text-gray-900"
+            ></span>
+            <span
+              x-text="`(${shop.products.filter(p => p.category === item).length})`"
+              class="text-gray-500"
+            ></span>
+          </label>
+        </template>
+      </section>
 
-          <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>
+      <section class="py-8 border-t border-gray-300">
+        <h3 class="text-lg mb-8">Discount</h3>
+        <template x-for="item in shop.filter.discounts" :key="item">
+          <label
+            :for="`item-${item}`"
+            class="mt-4 flex items-center gap-x-2 cursor-pointer accent-gray-600"
+            @change="shop.filterOption.discounts.includes(item) ? shop.filterOption.discounts.splice(shop.filterOption.discounts.indexOf(item), 1) : shop.filterOption.discounts.push(item);"
+          >
+            <input
+              type="checkbox"
+              class="size-5 sr-only"
+              :id="`item-${item}`"
+              :value="shop.filterOption.discounts.includes(item)"
+            />
+            <span
+              x-show="!shop.filterOption.discounts.includes(item)"
+              x-html="svg('square')"
+              class="text-gray-900"
+            ></span>
+            <span
+              x-show="shop.filterOption.discounts.includes(item)"
+              x-html="svg('checkbox')"
+              class="text-gray-700"
+            ></span>
+            <span
+              x-text="`${item[0].toUpperCase() + item.slice(1)}`"
+              class="text-gray-900"
+            ></span>
+            <span
+              x-text="`(${shop.products.filter(p => p.discount === item).length})`"
+              class="text-gray-500"
+            ></span>
+          </label>
+        </template>
+      </section>
 
-          <a
-            :href="`#/shop/${product.category}/${lowerName}?color=${currentColor}`"
-            class="block mb-1"
-            :class="(product.stock === 'in stock' && !product.label.length) && 'mt-5'"
+      <section class="py-8 border-t border-gray-300">
+        <h3 class="text-lg mb-8">Color</h3>
+        <template x-for="item in shop.filter.colors.toSorted()" :key="item">
+          <label
+            :for="`item-${item}`"
+            class="mt-4 flex items-center gap-x-2 cursor-pointer accent-gray-600"
+            @change="shop.filterOption.colors.includes(item) ? shop.filterOption.colors.splice(shop.filterOption.colors.indexOf(item), 1) : shop.filterOption.colors.push(item);"
           >
-            <h3
-              x-text="`${product.name}${product.colors.length > 1 ? ` (${currentColor})` : ''}`"
-              class="font-semibold"
-            ></h3>
-          </a>
+            <input
+              type="checkbox"
+              class="size-5 sr-only"
+              :id="`item-${item}`"
+              :value="shop.filterOption.colors.includes(item)"
+            />
+            <span
+              x-show="!shop.filterOption.colors.includes(item)"
+              x-html="svg('square')"
+              class="text-gray-900"
+            ></span>
+            <span
+              x-show="shop.filterOption.colors.includes(item)"
+              x-html="svg('checkbox')"
+              class="text-gray-700"
+            ></span>
+            <span
+              x-text="`${item[0].toUpperCase() + item.slice(1)}`"
+              class="text-gray-900"
+            ></span>
+            <span
+              x-text="`(${shop.products.filter(p => p.colors.includes(item)).length})`"
+              class="text-gray-500"
+            ></span>
+          </label>
+        </template>
+      </section>
 
-          <div class="space-x-1">
+      <section class="py-8 border-t border-gray-300">
+        <h3 class="text-lg mb-8">Stock</h3>
+        <template x-for="item in shop.filter.stocks.toSorted()" :key="item">
+          <label
+            :for="`item-${item}`"
+            class="mt-4 flex items-center gap-x-2 cursor-pointer accent-gray-600"
+            @change="shop.filterOption.stocks.includes(item) ? shop.filterOption.stocks.splice(shop.filterOption.stocks.indexOf(item), 1) : shop.filterOption.stocks.push(item);"
+          >
+            <input
+              type="checkbox"
+              class="size-5 sr-only"
+              :id="`item-${item}`"
+              :value="shop.filterOption.stocks.includes(item)"
+            />
             <span
-              :class="product.discount && 'line-through text-gray-400'"
-              x-text="`$${product.price}`"
+              x-show="!shop.filterOption.stocks.includes(item)"
+              x-html="svg('square')"
+              class="text-gray-900"
             ></span>
-            <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-show="shop.filterOption.stocks.includes(item)"
+              x-html="svg('checkbox')"
+              class="text-gray-700"
+            ></span>
+            <span
+              x-text="`${item[0].toUpperCase() + item.slice(1)}`"
+              class="text-gray-900"
+            ></span>
+            <span
+              x-text="`(${shop.products.filter(p => p.stock === item).length})`"
+              class="text-gray-500"
+            ></span>
+          </label>
+        </template>
+      </section>
+    </aside>
+    <div class="flex-1">
+      <ul
+        id="products"
+        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
+            x-data="{
+            lowerName: product.name.toLowerCase().replaceAll(' ', '_'),
+            currentColor: product.colors[0],
+          }"
+            :class="product.stock !== 'in stock' && 'disabled'"
+          >
+            <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>
+
+            <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="space-x-1">
               <span
-                x-text="`-${product.discount}`"
-                class="px-2 rounded-xl text-xs text-red-600 border border-red-600"
+                :class="product.discount && 'line-through text-gray-400'"
+                x-text="`$${product.price}`"
               ></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>
-        </li>
-      </template>
-    </ul>
+
+            <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>
+              </div>
+            </template>
+          </li>
+        </template>
+      </ul>
+    </div>
   </div>
 </div>