From ec3c2e0b67514c2028cbface68d8ff70a373b994 Mon Sep 17 00:00:00 2001
From: quangnhankie <nhantran@kie.io>
Date: Tue, 7 Sep 2021 09:56:45 +0700
Subject: [PATCH] feat: Create Component MenuFilter

---
 .../common/MenuFilter/MenuFilter.module.scss  | 23 +++++------
 .../common/MenuFilter/MenuFilter.tsx          | 39 ++++++++++++-------
 2 files changed, 36 insertions(+), 26 deletions(-)

diff --git a/src/components/common/MenuFilter/MenuFilter.module.scss b/src/components/common/MenuFilter/MenuFilter.module.scss
index b08f370d8..ecea2e119 100644
--- a/src/components/common/MenuFilter/MenuFilter.module.scss
+++ b/src/components/common/MenuFilter/MenuFilter.module.scss
@@ -1,6 +1,6 @@
 @import "../../../styles/utilities";
 .menuFilterWrapper{
-    @apply spacing-horizontal ;
+  
     @screen md {
         @apply hidden;
     }
@@ -14,30 +14,27 @@
         @apply flex flex-wrap justify-start relative;
         margin-bottom: 3rem;
         box-sizing: border-box;
+        &::after{
+            @apply absolute;
+            top: 110%;
+            content: "";
+            width: 100%;
+            border-bottom: 1px solid var(--border-line);
+        } 
+
         li{
             margin: 1rem 0;
             padding:0;
-            a{
+            div{
              padding: 0.8rem 1.6rem;
              margin-right: 0.8rem;
              background-color: var(--gray);
              border-radius: 0.8rem;
-             &:hover {
-                color:white;
-                background-color: var(--primary);
-             }
              &.active {
                 color:white;
                 background-color: var(--primary);
              }
             }
         }
-        &::after{
-            @apply absolute;
-            bottom: -20%;
-            content: "";
-            width: 100%;
-            border-bottom: 1px solid var(--border-line);
-        } 
     }
 }
diff --git a/src/components/common/MenuFilter/MenuFilter.tsx b/src/components/common/MenuFilter/MenuFilter.tsx
index e43c6384a..3b44761c3 100644
--- a/src/components/common/MenuFilter/MenuFilter.tsx
+++ b/src/components/common/MenuFilter/MenuFilter.tsx
@@ -1,30 +1,43 @@
 import classNames from 'classnames'
-import Link from 'next/link'
-import { useRouter } from 'next/router'
+import { useEffect, useState } from 'react';
 
 import s from './MenuFilter.module.scss'
-
-
 interface Props {
     children?: any,
-    heading:string,
-    categories:{name:string,link:string}[]
+    heading?:string,
+    categories:{name:string,link:string}[],
+    type:string,
+    onChangeValue?: (value: Object) => void
 }
 
-const MenuFilter = ({heading,categories}:Props)=> {
-    const router = useRouter()
+const MenuFilter = ({heading,categories,type,onChangeValue}:Props)=> {
+    const [active, setActive] = useState<string>('');
 
+    function handleClick(link:string){
+        setActive(link);
+
+        if(active === link){
+            setActive('');
+        }
+    }
+
+    useEffect(()=>{
+      
+        let href = active?.split("=");
+        const linkValue = href[1];
+
+        onChangeValue && onChangeValue({[type]:linkValue});
+    },[active]) 
+  
     return (
         <section className={classNames(s.menuFilterWrapper)}>
             <h2 className={classNames(s.menuFilterHeading)}>{heading}</h2>
             <ul className={s.menuFilterList}>
                 {
                     categories.map(item => <li key={item.name}>
-                        <Link href={item.link}>
-                            <a className={classNames({ [s.active]: router.asPath === item.link})}>
-                                {item.name}
-                            </a>
-                        </Link>
+                        <div onClick={()=> handleClick(item.link)} className={classNames({ [s.active]: item.link === active? true: false })}>
+                            {item.name}
+                        </div>
                     </li>)
                 }
             </ul>