From cbc5837e578ca107f129f8b922efde3fe685c102 Mon Sep 17 00:00:00 2001
From: Rafi Zadanly <rafizadanly@gmail.com>
Date: Tue, 20 Dec 2022 10:09:57 +0700
Subject: Merapihkan code, fix style

---
 src/components/Header.js | 102 +++++++++++++++++++++++++----------------------
 1 file changed, 55 insertions(+), 47 deletions(-)

(limited to 'src/components/Header.js')

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
-- 
cgit v1.2.3