feat: Create Component MenuFilter

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);
-        } 
     }
 }

src/components/common/MenuFilter/MenuFilter.tsx

@@ -1,30 +1,43 @@
 import classNames from 'classnames'
-import Link from 'next/link'
+import { useEffect, useState } from 'react';
-import { useRouter } from 'next/router'
 
 import s from './MenuFilter.module.scss'
-
-
 interface Props {
     children?: any,
-    heading:string,
+    heading?:string,
-    categories:{name:string,link:string}[]
+    categories:{name:string,link:string}[],
+    type:string,
+    onChangeValue?: (value: Object) => void
 }
 
-const MenuFilter = ({heading,categories}:Props)=> {
+const MenuFilter = ({heading,categories,type,onChangeValue}:Props)=> {
-    const router = useRouter()
+    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}>
+                        <div onClick={()=> handleClick(item.link)} className={classNames({ [s.active]: item.link === active? true: false })}>
-                            <a className={classNames({ [s.active]: router.asPath === item.link})}>
+                            {item.name}
-                                {item.name}
+                        </div>
-                            </a>
-                        </Link>
                     </li>)
                 }
             </ul>