fix: revert file error

This commit is contained in:
quangnhankie
2021-09-07 11:52:52 +07:00
parent 28143afed0
commit 90f45b4334
3 changed files with 37 additions and 30 deletions

View File

@@ -1,6 +1,6 @@
@import "../../../styles/utilities"; @import "../../../styles/utilities";
.menuFilterWrapper{ .menuFilterWrapper{
@apply spacing-horizontal ;
@screen md { @screen md {
@apply hidden; @apply hidden;
} }
@@ -14,30 +14,27 @@
@apply flex flex-wrap justify-start relative; @apply flex flex-wrap justify-start relative;
margin-bottom: 3rem; margin-bottom: 3rem;
box-sizing: border-box; box-sizing: border-box;
&::after{
@apply absolute;
top: 110%;
content: "";
width: 100%;
border-bottom: 1px solid var(--border-line);
}
li{ li{
margin: 1rem 0; margin: 1rem 0;
padding:0; padding:0;
a{ div{
padding: 0.8rem 1.6rem; padding: 0.8rem 1.6rem;
margin-right: 0.8rem; margin-right: 0.8rem;
background-color: var(--gray); background-color: var(--gray);
border-radius: 0.8rem; border-radius: 0.8rem;
&:hover {
color:white;
background-color: var(--primary);
}
&.active { &.active {
color:white; color:white;
background-color: var(--primary); background-color: var(--primary);
} }
} }
} }
&::after{
@apply absolute;
bottom: -20%;
content: "";
width: 100%;
border-bottom: 1px solid var(--border-line);
}
} }
} }

View File

@@ -1,30 +1,43 @@
import classNames from 'classnames' 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' import s from './MenuFilter.module.scss'
interface Props { interface Props {
children?: any, 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 ( return (
<section className={s.menuFilterWrapper}> <section className={s.menuFilterWrapper}>
<h2 className={s.menuFilterHeading}>{heading}</h2> <h2 className={s.menuFilterHeading}>{heading}</h2>
<ul className={s.menuFilterList}> <ul className={s.menuFilterList}>
{ {
categories.map(item => <li key={item.name}> 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>) </li>)
} }
</ul> </ul>

View File

@@ -2,12 +2,9 @@ export const LANGUAGE = {
BUTTON_LABEL: { BUTTON_LABEL: {
BUY_NOW: 'Buy now', BUY_NOW: 'Buy now',
SHOP_NOW: 'Shop now', SHOP_NOW: 'Shop now',
<<<<<<< HEAD CONFIRM:'Confirm',
CONFIRM:'Confirm'
=======
ADD_TO_CARD: 'Add to Cart', ADD_TO_CARD: 'Add to Cart',
PREORDER: 'Pre-Order Now', PREORDER: 'Pre-Order Now',
>>>>>>> a9f9f06eb9dee2a1ddefe907ff804237a78c5210
}, },
PLACE_HOLDER: { PLACE_HOLDER: {
SEARCH: 'Search', SEARCH: 'Search',