crowetic/commerce
1
0
Fork 1
mirror of https://github.com/vercel/commerce.git synced 2025-07-05 12:41:21 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix: fix bug Components MenuFilter and MenuNavigation follow by review of Ly Tran

Browse Source
This commit is contained in:
quangnhankie 2021-08-31 15:37:09 +07:00
parent 1954d8c266
commit 51d30bb9e4
5 changed files with 39 additions and 68 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
pages/index.tsx
View File

@ -2,7 +2,33 @@
import { Layout } from 'src/components/common';
import { MenuNavigation,MenuFilter} from 'src/components/common';
import { HomeBanner, HomeCategories, HomeCTA, HomeSubscribe, HomeVideo } from 'src/components/modules/home';
import { OPTION_ALL, QUERY_KEY, ROUTE } from 'src/utils/constanst.utils'
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`,
},
]
export default function Home() {
return (
<>
@ -11,8 +37,8 @@ export default function Home() {
<HomeVideo />
<HomeCTA />
<HomeSubscribe /> */}
<MenuFilter heading="Categories"/>
<MenuNavigation heading="Categories"/>
<MenuFilter categories={CATEGORY} heading="Categories"/>
<MenuNavigation categories={CATEGORY} heading="Categories"/>
</>
)
}

5
src/components/common/MenuFilter/MenuFilter.module.scss
View File

@ -20,9 +20,6 @@
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 {
@ -40,7 +37,7 @@
bottom: -20%;
content: "";
width: 100%;
border-bottom: 1px solid #EBEBEB;
border-bottom: 1px solid var(--border-line);
}
}
}

34
src/components/common/MenuFilter/MenuFilter.tsx
View File

@ -1,41 +1,17 @@
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,
categories:{name:string,link:string}[]
}
const MenuFilter = ({heading}:Props)=> {
const MenuFilter = ({heading,categories}:Props)=> {
const router = useRouter()
return (
@ -43,7 +19,7 @@ const MenuFilter = ({heading}:Props)=> {
<h2 className={classNames(s.menuFilterHeading)}>{heading}</h2>
<ul className={s.menuFilterList}>
{
CATEGORY.map(item => <li key={item.name}>
categories.map(item => <li key={item.name}>
<Link href={item.link}>
<a className={classNames({ [s.active]: router.asPath === item.link})}>
{item.name}

2
src/components/common/MenuNavigation/MenuNavigation.module.scss
View File

@ -13,8 +13,6 @@
li{
margin: 0.8rem 0;
a{
font-size: var(--font-size);
line-height: var(--line-height);
color:var(--text-base);
&:hover {
@apply text-primary;

34
src/components/common/MenuNavigation/MenuNavigation.tsx
View File

@ -1,49 +1,23 @@
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,
categories:{name:string,link:string}[]
}
const MenuNavigation = ({heading}:Props)=> {
const MenuNavigation = ({heading,categories}:Props)=> {
const router = useRouter()
return (
<section className={classNames(s.menuNavigationWrapper)}>
<h2 className={classNames(s.menuNavigationHeading)}>{heading}({CATEGORY.length})</h2>
<h2 className={classNames(s.menuNavigationHeading)}>{heading}({categories.length})</h2>
<ul className={s.menuNavigationList}>
{
CATEGORY.map(item => <li key={item.name}
categories.map(item => <li key={item.name}
>
<Link href={item.link}>
<a className={classNames({ [s.active]: router.asPath === item.link})}>