feat: create component MenuFilter and MenuNavigation

package-lock.json

@@ -5239,6 +5239,11 @@
         }
       }
     },
+    "load-script": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/load-script/-/load-script-1.0.0.tgz",
+      "integrity": "sha1-BJGTngvuVkPuSUp+PaPSuscMbKQ="
+    },
     "loader-utils": {
       "version": "1.2.3",
       "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-1.2.3.tgz",
@@ -5547,6 +5552,11 @@
         "safe-buffer": "^5.1.2"
       }
     },
+    "memoize-one": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/memoize-one/-/memoize-one-5.2.1.tgz",
+      "integrity": "sha512-zYiwtZUcYyXKo/np96AGZAckk+FWWsUdJ3cHGGmld7+AhvcWmQyGCYUh1hc4Q/pkOhb65dQR/pqCyK0cOaHz4Q=="
+    },
     "merge-stream": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/merge-stream/-/merge-stream-2.0.0.tgz",
@@ -8588,6 +8598,11 @@
         "scheduler": "^0.20.2"
       }
     },
+    "react-fast-compare": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-3.2.0.tgz",
+      "integrity": "sha512-rtGImPZ0YyLrscKI9xTpV8psd6I8VAtjKCzQDlzyDvqJA8XOW78TXYQwNRNd8g8JZnDu8q9Fu/1v4HPAVwVdHA=="
+    },
     "react-fast-marquee": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/react-fast-marquee/-/react-fast-marquee-1.2.1.tgz",
@@ -8603,6 +8618,18 @@
       "resolved": "https://registry.npmjs.org/react-merge-refs/-/react-merge-refs-1.1.0.tgz",
       "integrity": "sha512-alTKsjEL0dKH/ru1Iyn7vliS2QRcBp9zZPGoWxUOvRGWPUYgjo+V01is7p04It6KhgrzhJGnIj9GgX8W4bZoCQ=="
     },
+    "react-player": {
+      "version": "2.9.0",
+      "resolved": "https://registry.npmjs.org/react-player/-/react-player-2.9.0.tgz",
+      "integrity": "sha512-jNUkTfMmUhwPPAktAdIqiBcVUKsFKrVGH6Ocutj6535CNfM91yrvWxHg6fvIX8Y/fjYUPoejddwh7qboNV9vGA==",
+      "requires": {
+        "deepmerge": "^4.0.0",
+        "load-script": "^1.0.0",
+        "memoize-one": "^5.1.1",
+        "prop-types": "^15.7.2",
+        "react-fast-compare": "^3.0.1"
+      }
+    },
     "react-refresh": {
       "version": "0.8.3",
       "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.8.3.tgz",

pages/index.tsx

@@ -1,15 +1,18 @@
 
 import { Layout } from 'src/components/common';
+import { MenuNavigation,MenuFilter} from 'src/components/common';
 import { HomeBanner, HomeCategories, HomeCTA, HomeSubscribe, HomeVideo } from 'src/components/modules/home';
 
 export default function Home() {
   return (
     <>
-      <HomeBanner />
+      {/* <HomeBanner />
       <HomeCategories/>
       <HomeVideo />
       <HomeCTA />
-      <HomeSubscribe />
+      <HomeSubscribe /> */}
+      <MenuFilter heading="Categories"/> 
+      <MenuNavigation heading="Categories"/>
     </>
   )
 }

src/components/common/MenuFilter/MenuFilter.module.scss

@@ -0,0 +1,46 @@
+@import "../../../styles/utilities";
+.menuFilterWrapper{
+    @apply spacing-horizontal ;
+    @screen md {
+        @apply hidden;
+    }
+    .menuFilterHeading{
+        @apply sub-headline font-bold ;
+        color: var(--text-active);
+        font-feature-settings: 'salt' on;
+        margin: 0.8rem 0;
+    }
+    .menuFilterList{
+        @apply flex flex-wrap justify-start relative;
+        margin-bottom: 3rem;
+        box-sizing: border-box;
+        li{
+            margin: 1rem 0;
+            padding:0;
+            a{
+             padding: 0.8rem 1.6rem;
+             margin-right: 0.8rem;
+             font-size: var(--font-size);
+             line-height: var(--line-height);
+             color:var(--text-base);
+             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 #EBEBEB;
+        } 
+    }
+}

src/components/common/MenuFilter/MenuFilter.tsx

@@ -0,0 +1,59 @@
+import classNames from 'classnames'
+import Link from 'next/link'
+import { useRouter } from 'next/router'
+import { OPTION_ALL, QUERY_KEY, ROUTE } from 'src/utils/constanst.utils'
+import s from './MenuFilter.module.scss'
+const CATEGORY = [
+    {
+        name: 'All',
+        link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.BRAND}=${OPTION_ALL}`,
+    },
+    {
+        name: 'Veggie',
+        link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.BRAND}=veggie`,
+    },
+    {
+        name: 'Seafood',
+        link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.BRAND}=seafood`,
+    },
+    {
+        name: 'Frozen',
+        link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.BRAND}=frozen`,
+    },
+    {
+        name: 'Coffee Bean',
+        link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.BRAND}=coffee-bean`,
+    },
+    {
+        name: 'Sauce',
+        link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.BRAND}=sauce`,
+    },
+]
+
+interface Props {
+    children?: any,
+    heading:string,
+}
+
+const MenuFilter = ({heading}:Props)=> {
+    const router = useRouter()
+
+    return (
+        <section className={classNames(s.menuFilterWrapper)}>
+            <h2 className={classNames(s.menuFilterHeading)}>{heading}</h2>
+            <ul className={s.menuFilterList}>
+                {
+                    CATEGORY.map(item => <li key={item.name}>
+                        <Link href={item.link}>
+                            <a className={classNames({ [s.active]: router.asPath === item.link})}>
+                                {item.name}
+                            </a>
+                        </Link>
+                    </li>)
+                }
+            </ul>
+        </section>
+    )
+}
+
+export default MenuFilter

src/components/common/MenuNavigation/MenuNavigation.module.scss

@@ -0,0 +1,29 @@
+@import "../../../styles/utilities";
+.menuNavigationWrapper{
+    .menuNavigationHeading{
+        @screen md {
+            @apply sub-headline font-bold ;
+            color: var(--text-active);
+            font-feature-settings: 'salt' on;
+            margin: 1.6rem 0;
+        }
+    }
+    .menuNavigationList{
+        @screen md {
+            li{
+                margin: 0.8rem 0;
+                a{
+                 font-size: var(--font-size);
+                 line-height: var(--line-height);
+                 color:var(--text-base);
+                 &:hover {
+                    @apply text-primary;
+                 }
+                 &.active {
+                    @apply text-primary;
+                 }
+                }
+            }
+        }
+     }
+}

src/components/common/MenuNavigation/MenuNavigation.tsx

@@ -0,0 +1,60 @@
+import classNames from 'classnames'
+import Link from 'next/link'
+import { useRouter } from 'next/router'
+import { OPTION_ALL, QUERY_KEY, ROUTE } from 'src/utils/constanst.utils'
+import s from './MenuNavigation.module.scss'
+const CATEGORY = [
+    {
+        name: 'All',
+        link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.BRAND}=${OPTION_ALL}`,
+    },
+    {
+        name: 'Veggie',
+        link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.BRAND}=veggie`,
+    },
+    {
+        name: 'Seafood',
+        link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.BRAND}=seafood`,
+    },
+    {
+        name: 'Frozen',
+        link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.BRAND}=frozen`,
+    },
+    {
+        name: 'Coffee Bean',
+        link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.BRAND}=coffee-bean`,
+    },
+    {
+        name: 'Sauce',
+        link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.BRAND}=sauce`,
+    },
+]
+
+interface Props {
+    children?: any,
+    heading:string,
+}
+
+const MenuNavigation = ({heading}:Props)=> {
+    const router = useRouter()
+
+    return (
+        <section className={classNames(s.menuNavigationWrapper)}>
+            <h2 className={classNames(s.menuNavigationHeading)}>{heading}({CATEGORY.length})</h2>
+            <ul className={s.menuNavigationList}>
+                {
+                    CATEGORY.map(item => <li key={item.name}
+                       >
+                        <Link href={item.link}>
+                            <a className={classNames({ [s.active]: router.asPath === item.link})}>
+                                {item.name}
+                            </a>
+                        </Link>
+                    </li>)
+                }
+            </ul>
+        </section>
+    )
+}
+
+export default MenuNavigation

src/components/common/index.ts

@@ -23,3 +23,5 @@ export { default as MenuDropdown} from './MenuDropdown/MenuDropdown'
 export { default as NotiMessage} from './NotiMessage/NotiMessage'
 export { default as VideoPlayer} from './VideoPlayer/VideoPlayer'
 export { default as SelectCommon} from './SelectCommon/SelectCommon'
+export { default as MenuNavigation} from './MenuNavigation/MenuNavigation'
+export { default as MenuFilter} from './MenuFilter/MenuFilter'

src/utils/constanst.utils.ts

@@ -38,10 +38,10 @@ export enum ProductFeature {
     Sales = 'Sales',
     NewItem = 'New Item',
     Viewed = 'Viewed',
-
 }
 
 export const KEY = {
     ENTER: 'Enter',
 }
 
+export const OPTION_ALL = 'all';