Merapihkan code, fix style

2 files changed, 145 insertions, 129 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>
+    </>
   )
 };
 
diff --git a/src/components/Header.js b/src/components/Header.js
index ab45eaf6..ca59701e 100644
--- a/src/components/Header.js
+++ b/src/components/Header.js
@@ -1,16 +1,21 @@
 import Image from "next/image";
-import Link from "./Link";
-import ShoppingCartIcon from "../icons/shopping-cart.svg";
-import SearchIcon from "../icons/search.svg";
-import MenuIcon from "../icons/menu.svg";
-import ChevronRightIcon from "../icons/chevron-right.svg";
 import { useCallback, useEffect, useRef, useState } from "react";
 import Head from "next/head";
-import Logo from "../images/logo.png";
 import { useRouter } from "next/router";
-import { getAuth } from "../helpers/auth";
 import axios from "axios";
+import {
+  MagnifyingGlassIcon,
+  Bars3Icon,
+  ShoppingCartIcon,
+  ChevronRightIcon
+} from "@heroicons/react/24/outline";
 
+// Helpers
+import { getAuth } from "../helpers/auth";
+// Components
+import Link from "./Link";
+// Images
+import Logo from "../images/logo.png";
 
 export default function Header({ title }) {
   const router = useRouter();
@@ -81,30 +86,30 @@ export default function Header({ title }) {
           )}
         </div>
         <div className="flex flex-col">
-          {auth ? (
-            <Link className="flex w-full font-normal text-gray-800 border-b border-gray_r-6 p-4 py-3" href="/shop/brands" onClick={closeMenu}>
+          {auth && (
+            <Link className="flex w-full font-normal text-gray_r-11 border-b border-gray_r-6 p-4 py-3" href="/shop/brands" onClick={closeMenu}>
                 <span>Profil Saya</span>
                 <div className="ml-auto">
-                  <ChevronRightIcon className="stroke-gray-700 w-5 h-5" />
+                  <ChevronRightIcon className="text-gray_r-12 w-5" />
                 </div>
             </Link>
-          ) : ''}
-          <Link className="flex w-full font-normal text-gray-800 border-b border-gray_r-6 p-4 py-3" href="/shop/brands" onClick={closeMenu}>
+          )}
+          <Link className="flex w-full font-normal text-gray_r-11 border-b border-gray_r-6 p-4 py-3" href="/shop/brands" onClick={closeMenu}>
               <span>Semua Brand</span>
               <div className="ml-auto">
-                <ChevronRightIcon className="stroke-gray-700 w-5 h-5" />
+                <ChevronRightIcon className="text-gray_r-12 w-5" />
               </div>
           </Link>
-          <Link className="flex w-full font-normal text-gray-800 border-b border-gray_r-6 p-4 py-3" href="/blog" onClick={closeMenu}>
+          <Link className="flex w-full font-normal text-gray_r-11 border-b border-gray_r-6 p-4 py-3" href="/blog" onClick={closeMenu}>
               <span>Blog Indoteknik</span>
               <div className="ml-auto">
-                <ChevronRightIcon className="stroke-gray-700 w-5 h-5" />
+                <ChevronRightIcon className="text-gray_r-12 w-5" />
               </div>
           </Link>
-          <button className="flex w-full font-normal text-gray-800 border-b border-gray_r-6 p-4 py-3" onClick={closeMenu}>
+          <button className="flex w-full font-normal text-gray_r-11 border-b border-gray_r-6 p-4 py-3" onClick={closeMenu}>
               <span>Kategori</span>
               <div className="ml-auto">
-                <ChevronRightIcon className="stroke-gray-700 w-5 h-5" />
+                <ChevronRightIcon className="text-gray_r-12 w-5" />
               </div>
           </button>
         </div>
@@ -116,46 +121,49 @@ export default function Header({ title }) {
           <Link href="/" scroll={false}>
             <Image src={Logo} alt="Logo Indoteknik" width={120} height={40} />
           </Link>
-          <div className="flex gap-4">
+          <div className="flex gap-x-4">
             <Link href="/shop/cart">
-              <ShoppingCartIcon className="w-6 stroke-gray-900" />
+              <ShoppingCartIcon className="w-6 text-gray_r-12" />
             </Link>
             <button onClick={openMenu}>
-              <MenuIcon className="w-6 stroke-gray-900" />
+              <Bars3Icon className="w-6 text-gray_r-12" />
             </button>
           </div>
         </div>
         <form onSubmit={searchSubmit} className="relative flex mt-2">
-            <input 
-              ref={searchQueryRef}
-              type="text" 
-              name="q" 
-              onChange={(e) => setSearchQuery(e.target.value)} 
-              onFocus={getSuggestion}
-              value={searchQuery} 
-              className="form-input rounded-r-none border-r-0 focus:ring-0" 
-              placeholder="Ketikan nama, merek, part number"
-              autoComplete="off"
-            />
-            <button 
-              type="submit" 
-              aria-label="search" 
-              className="btn-light bg-transparent px-2 py-1 rounded-l-none border-l-0"
-            >
-              <SearchIcon />
-            </button>
-            {suggestions.length > 1 ? (
-              <div className="absolute w-full top-[50px] rounded-b bg-gray_r-2 border border-gray_r-6">
-                {suggestions.map((suggestion, index) => (
-                  <p onClick={() => clickSuggestion(suggestion.term)} className="w-full p-2" key={index}>{suggestion.term}</p>
-                ))}
-              </div>
-            ) : ''}
+          <input 
+            ref={searchQueryRef}
+            type="text" 
+            name="q" 
+            onChange={(e) => setSearchQuery(e.target.value)} 
+            onFocus={getSuggestion}
+            value={searchQuery} 
+            className="form-input rounded-r-none border-r-0 focus:border-gray_r-7" 
+            placeholder="Ketikan nama, merek, part number"
+            autoComplete="off"
+          />
+
+          <button 
+            type="submit" 
+            aria-label="search" 
+            className="btn-light bg-transparent px-2 py-1 rounded-l-none border-l-0"
+          >
+            <MagnifyingGlassIcon className="w-6" />
+          </button>
+
+          {suggestions.length > 1 && (
+            <div className="absolute w-full top-[50px] rounded-b bg-gray_r-2 border border-gray_r-6">
+              {suggestions.map((suggestion, index) => (
+                <p onClick={() => clickSuggestion(suggestion.term)} className="w-full p-2" key={index}>{suggestion.term}</p>
+              ))}
+            </div>
+          )}
         </form>
       </div>
-      {suggestions.length > 1 ? (
+
+      {suggestions.length > 1 && (
         <div className="menu-overlay !z-40" onClick={() => setSuggestions([])}></div>
-      ) : ''}
+      )}
     </>
   )
 }
\ No newline at end of file