Filter

Author: w3bdesign

components/Products/ProductFilters.vue

@@ -1,52 +1,52 @@
 <template>
   <div class="w-full md:w-64 flex-shrink-0">
     <div class="bg-white px-8 pb-8 sm:px-6 sm:pb-6 rounded-lg shadow-sm">
-      <!-- PRODUCT TYPE -->
       <div class="mb-8">
         <h3 class="font-semibold mb-4">PRODUKT TYPE</h3>
         <div class="space-y-2">
-          <!-- Example checkboxes, replace with dynamic content later -->
           <div class="flex items-center">
-            <input type="checkbox" id="type1" class="mr-2" />
-            <label for="type1" class="text-sm">Type 1</label>
+            <input type="checkbox" id="clothing" class="form-checkbox h-4 w-4 text-blue-600 rounded" disabled />
+            <label for="clothing" class="ml-2 text-sm">Clothing</label>
           </div>
           <div class="flex items-center">
-            <input type="checkbox" id="type2" class="mr-2" />
-            <label for="type2" class="text-sm">Type 2</label>
+            <input type="checkbox" id="tshirts" class="form-checkbox h-4 w-4 text-blue-600 rounded" disabled />
+            <label for="tshirts" class="ml-2 text-sm">Tshirts</label>
+          </div>
+          <div class="flex items-center">
+            <input type="checkbox" id="uncategorized" class="form-checkbox h-4 w-4 text-blue-600 rounded" disabled />
+            <label for="uncategorized" class="ml-2 text-sm">Uncategorized</label>
           </div>
         </div>
       </div>
 
-      <!-- PRICE -->
       <div class="mb-8">
         <h3 class="font-semibold mb-4">PRIS</h3>
         <div class="flex items-center space-x-2">
-          <input type="range" min="0" max="1000" class="w-full" />
-          <span class="text-sm">kr 0 - kr 1000</span>
+          <input type="range" min="0" max="1000" class="w-full accent-blue-600" disabled />
+        </div>
+        <div class="flex justify-between text-sm mt-1">
+          <span>kr 0</span>
+          <span>kr 1000</span>
         </div>
       </div>
 
-      <!-- SIZE -->
       <div class="mb-8">
         <h3 class="font-semibold mb-4">STØRRELSE</h3>
-        <div class="grid grid-cols-3 gap-2">
-          <button class="px-2 py-1 rounded border text-sm">S</button>
-          <button class="px-2 py-1 rounded border text-sm">M</button>
-          <button class="px-2 py-1 rounded border text-sm">L</button>
+        <div class="grid grid-cols-1 gap-2">
+          <button class="px-4 py-1 rounded border text-sm bg-gray-100 text-gray-800" disabled>Large</button>
         </div>
       </div>
 
-      <!-- COLOR -->
       <div class="mb-8">
         <h3 class="font-semibold mb-4">FARGE</h3>
-        <div class="grid grid-cols-3 gap-2">
-          <button class="w-8 h-8 rounded-full bg-red-500"></button>
-          <button class="w-8 h-8 rounded-full bg-blue-500"></button>
-          <button class="w-8 h-8 rounded-full bg-green-500"></button>
+        <div class="grid grid-cols-1 gap-2">
+          <button class="w-8 h-8 rounded-full bg-blue-500" disabled></button>
         </div>
       </div>
 
-      <button class="mt-4 w-full py-2 rounded bg-gray-200 text-gray-700 text-sm font-medium">Resett filter</button>
+      <button class="mt-4 w-full py-2 rounded bg-gray-100 text-gray-500 text-sm font-medium" disabled>
+        Resett filter
+      </button>
     </div>
   </div>
 </template>

components/Products/ProductSort.vue

@@ -1,9 +1,9 @@
 <template>
-  <div class="flex flex-wrap items-center justify-center sm:justify-end gap-2 sm:gap-4">
-    <label for="sort-select" class="text-sm font-medium">Sortering:</label>
+  <div class="flex items-center gap-2">
+    <label for="sort-select" class="text-base text-gray-700">Sortering:</label>
     <select
       id="sort-select"
-      class="min-w-[140px] border rounded-md px-3 py-1.5 text-sm"
+      class="min-w-[140px] border border-gray-200 rounded-lg px-3 py-2 text-base bg-gray-50 text-gray-700 focus:outline-none"
       disabled
     >
       <option value="popular">Populær</option>