Merapihkan code, fix style

1 files changed, 90 insertions, 82 deletions

diff --git a/src/components/Filter.js b/src/components/Filter.js
index 19e9778f..92a28e09 100644
--- a/src/components/Filter.js
+++ b/src/components/Filter.js
@@ -83,92 +83,100 @@ const Filter = ({
     }
   }
 
+  const sortOptions = [
+    {
+      name: 'Harga Terendah',
+      value: 'price-asc',
+    }, 
+    {
+      name: 'Harga Tertinggi',
+      value: 'price-desc',
+    },
+    {
+      name: 'Populer',
+      value: 'popular',
+    },
+    {
+      name: 'Ready Stock',
+      value: 'stock',
+    },
+  ];
+
   return (
-    <div className={`fixed w-full z-50 py-6 px-4 ring ring-gray-300 bg-white rounded-t-3xl idt-transition ${isActive ? 'bottom-0' : 'bottom-[-100%]'}`}>
-      <div className="flex justify-between items-center mb-5">
-        <h2 className="text-xl font-semibold">Filter Produk</h2>
-        <button onClick={closeFilter}>
-          <CloseIcon className="w-7" />
-        </button>
-      </div>
-      <form className="flex flex-col gap-y-4" onSubmit={submit}>
-        {selectedBrand || selectedCategory || priceFrom || priceTo || orderBy ? (
-          <button type="button" className="text-yellow_r-12 font-semibold ml-auto" onClick={reset}>
-            Reset Filter
+    <>
+      <div className={"menu-overlay " + (isActive ? 'block' : 'hidden')} onClick={closeFilter} />
+      <div className={`fixed w-full z-[60] py-6 px-4 bg-white rounded-t-3xl idt-transition ${isActive ? 'bottom-0' : 'bottom-[-100%]'}`}>
+        <div className="flex justify-between items-center mb-5">
+          <h2 className="text-xl font-semibold">Filter Produk</h2>
+          <button onClick={closeFilter}>
+            <CloseIcon className="w-7" />
           </button>
-        ) : ''}
-        {!disableFilter.includes('orderBy') ? (
-          <div>
-            <label>Urutkan</label>
-            <div className="flex gap-2 mt-2 overflow-x-auto w-full">
-              <button 
-                type="button" 
-                className={"p-2 rounded border border-gray_r-6 flex-shrink-0" + (orderBy == 'price-asc' ? ' border-yellow_r-9 text-yellow_r-10' : '')} 
-                onClick={() => changeOrderBy('price-asc')}
-              >
-                Harga Terendah
-              </button>
-              <button 
-                type="button" 
-                className={"p-2 rounded border border-gray_r-6 flex-shrink-0" + (orderBy == 'price-desc' ? ' border-yellow_r-9 text-yellow_r-10' : '')} 
-                onClick={() => changeOrderBy('price-desc')}
-              >
-                Harga Tertinggi
-              </button>
-              <button 
-                type="button" 
-                className={"p-2 rounded border border-gray_r-6 flex-shrink-0" + (orderBy == 'popular' ? ' border-yellow_r-9 text-yellow_r-10' : '')} 
-                onClick={() => changeOrderBy('popular')}
-              >
-                Populer
-              </button>
-              <button 
-                type="button" 
-                className={"p-2 rounded border border-gray_r-6 flex-shrink-0" + (orderBy == 'stock' ? ' border-yellow_r-9 text-yellow_r-10' : '')} 
-                onClick={() => changeOrderBy('stock')}
-              >
-                Ready Stock
-              </button>
-            </div>
-          </div>
-        ) : ''}
-        {!disableFilter.includes('category') ? (
-          <div>
-            <label>Kategori</label>
-            <select className="form-input mt-2" value={selectedCategory} onChange={(e) => setSelectedCategory(e.target.value)}>
-              <option value="">Pilih kategori...</option>
-              {categories?.map((category, index) => (
-                <option key={index} value={category}>{category}</option>
-              ))}
-            </select>
-          </div>
-        ) : ''}
-        {!disableFilter.includes('brand') ? (
-          <div>
-            <label>Brand</label>
-            <select className="form-input mt-2" value={selectedBrand} onChange={(e) => setSelectedBrand(e.target.value)}>
-              <option value="">Pilih brand...</option>
-              {brands?.map((brand, index) => (
-                <option key={index} value={brand}>{brand}</option>
+        </div>
+        <form className="flex flex-col gap-y-4" onSubmit={submit}>
+          {(selectedBrand || selectedCategory || priceFrom || priceTo || orderBy) && (
+            <button type="button" className="text-yellow_r-11 font-semibold ml-auto" onClick={reset}>
+              Reset Filter
+            </button>
+          )}
+
+          {!disableFilter.includes('orderBy') && (
+            <div>
+              <label>Urutkan</label>
+              <div className="flex gap-2 mt-2 overflow-x-auto w-full">
+              {sortOptions.map((sortOption, index) => (
+                <button 
+                  key={index}
+                  type="button" 
+                  className={"p-2 rounded border border-gray_r-6 flex-shrink-0" + (orderBy == sortOption.value ? ' border-yellow_r-10 bg-yellow_r-3 text-yellow_r-11' : '')} 
+                  onClick={() => changeOrderBy(sortOption.value)}
+                >
+                  {sortOption.name}
+                </button>
               ))}
-            </select>
-          </div>
-        ) : ''}
-        {!disableFilter.includes('price') ? (
-          <div>
-            <label>Harga</label>
-            <div className="flex gap-x-4 mt-2 items-center">
-              <input className="form-input" type="number" placeholder="Dari" value={priceFrom} onChange={(e) => setPriceFrom(e.target.value)}/>
-              <span>&mdash;</span>
-              <input className="form-input" type="number" placeholder="Sampai" value={priceTo} onChange={(e) => setPriceTo(e.target.value)}/>
+              </div>
+            </div>
+          )}
+
+          {!disableFilter.includes('category') && (
+            <div>
+              <label>Kategori</label>
+              <select className="form-input mt-2" value={selectedCategory} onChange={(e) => setSelectedCategory(e.target.value)}>
+                <option value="">Pilih kategori...</option>
+                {categories?.map((category, index) => (
+                  <option key={index} value={category}>{category}</option>
+                ))}
+              </select>
             </div>
-          </div>
-        ) : ''}
-        <button type="submit" className="btn-yellow font-semibold mt-2 w-full">
-          Terapkan Filter
-        </button>
-      </form>
-    </div>
+          )}
+
+          {!disableFilter.includes('brand') && (
+            <div>
+              <label>Brand</label>
+              <select className="form-input mt-2" value={selectedBrand} onChange={(e) => setSelectedBrand(e.target.value)}>
+                <option value="">Pilih brand...</option>
+                {brands?.map((brand, index) => (
+                  <option key={index} value={brand}>{brand}</option>
+                ))}
+              </select>
+            </div>
+          )}
+
+          {!disableFilter.includes('price') && (
+            <div>
+              <label>Harga</label>
+              <div className="flex gap-x-4 mt-2 items-center">
+                <input className="form-input" type="number" placeholder="Dari" value={priceFrom} onChange={(e) => setPriceFrom(e.target.value)}/>
+                <span>&mdash;</span>
+                <input className="form-input" type="number" placeholder="Sampai" value={priceTo} onChange={(e) => setPriceTo(e.target.value)}/>
+              </div>
+            </div>
+          )}
+          <button type="submit" className="btn-yellow font-semibold mt-2 w-full">
+            Terapkan Filter
+          </button>
+        </form>
+      </div>
+    </>
   )
 };