diff --git a/package-lock.json b/package-lock.json
index 5e63e2d25..72b57bcbc 100644
--- a/package-lock.json
+++ b/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",
diff --git a/pages/index.tsx b/pages/index.tsx
index 2e5fe6afb..06d12a024 100644
--- a/pages/index.tsx
+++ b/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 (
<>
-
+ {/*
-
+ */}
+
+
)
}
diff --git a/src/components/common/MenuFilter/MenuFilter.module.scss b/src/components/common/MenuFilter/MenuFilter.module.scss
new file mode 100644
index 000000000..afb66799b
--- /dev/null
+++ b/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;
+ }
+ }
+}
diff --git a/src/components/common/MenuFilter/MenuFilter.tsx b/src/components/common/MenuFilter/MenuFilter.tsx
new file mode 100644
index 000000000..f6a2c9d4c
--- /dev/null
+++ b/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 (
+
+ )
+}
+
+export default MenuFilter
diff --git a/src/components/common/MenuNavigation/MenuNavigation.module.scss b/src/components/common/MenuNavigation/MenuNavigation.module.scss
new file mode 100644
index 000000000..0b3dcae8b
--- /dev/null
+++ b/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;
+ }
+ }
+ }
+ }
+ }
+}
diff --git a/src/components/common/MenuNavigation/MenuNavigation.tsx b/src/components/common/MenuNavigation/MenuNavigation.tsx
new file mode 100644
index 000000000..f0b9bcfc9
--- /dev/null
+++ b/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 (
+
+ {heading}({CATEGORY.length})
+
+
+ )
+}
+
+export default MenuNavigation
diff --git a/src/components/common/index.ts b/src/components/common/index.ts
index 650ec34bc..b58b68f57 100644
--- a/src/components/common/index.ts
+++ b/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'
\ No newline at end of file
diff --git a/src/utils/constanst.utils.ts b/src/utils/constanst.utils.ts
index 0d66ecda0..cddbbb07e 100644
--- a/src/utils/constanst.utils.ts
+++ b/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';
\ No newline at end of file