crowetic/commerce
1
0
Fork 1
mirror of https://github.com/vercel/commerce.git synced 2025-07-23 04:36:49 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: create component MenuFilter and MenuNavigation

Browse Source
This commit is contained in:
quangnhankie
2021-08-30 19:39:35 +07:00
parent 813a474a5e
commit 1954d8c266
8 changed files with 229 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

46
src/components/common/MenuFilter/MenuFilter.module.scss Normal file
View File

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

59
src/components/common/MenuFilter/MenuFilter.tsx Normal file
View File

@@ -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

29
src/components/common/MenuNavigation/MenuNavigation.module.scss Normal file
View File

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

60
src/components/common/MenuNavigation/MenuNavigation.tsx Normal file
View File

@@ -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

2
src/components/common/index.ts
View File

@@ -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'

2
src/utils/constanst.utils.ts
View File

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