mirror of
https://github.com/vercel/commerce.git
synced 2025-07-21 11:51:20 +00:00
feat: create component MenuNavigationProductList
This commit is contained in:
quangnhankie
parent
51d30bb9e4
commit
db0d16b2c1
3
public/assets/svg/check.svg
Normal file
3
public/assets/svg/check.svg
Normal file
@ -0,0 +1,3 @@
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M18.7099 7.20986C18.617 7.11613 18.5064 7.04174 18.3845 6.99097C18.2627 6.9402 18.132 6.91406 17.9999 6.91406C17.8679 6.91406 17.7372 6.9402 17.6154 6.99097C17.4935 7.04174 17.3829 7.11613 17.29 7.20986L9.83995 14.6699L6.70995 11.5299C6.61343 11.4366 6.49949 11.3633 6.37463 11.3141C6.24978 11.2649 6.11645 11.2408 5.98227 11.2431C5.84809 11.2454 5.71568 11.2741 5.5926 11.3276C5.46953 11.3811 5.35819 11.4583 5.26495 11.5549C5.17171 11.6514 5.0984 11.7653 5.04919 11.8902C4.99999 12.015 4.97586 12.1484 4.97818 12.2825C4.9805 12.4167 5.00923 12.5491 5.06272 12.6722C5.11622 12.7953 5.19343 12.9066 5.28995 12.9999L9.12995 16.8399C9.22291 16.9336 9.33351 17.008 9.45537 17.0588C9.57723 17.1095 9.70794 17.1357 9.83995 17.1357C9.97196 17.1357 10.1027 17.1095 10.2245 17.0588C10.3464 17.008 10.457 16.9336 10.55 16.8399L18.7099 8.67986C18.8115 8.58622 18.8925 8.47257 18.9479 8.34607C19.0033 8.21957 19.0319 8.08296 19.0319 7.94486C19.0319 7.80676 19.0033 7.67015 18.9479 7.54365C18.8925 7.41715 18.8115 7.3035 18.7099 7.20986Z" fill="#5B9A74"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.1 KiB |
@ -0,0 +1,43 @@
|
||||
@import "../../../styles/utilities";
|
||||
.menuNavigationProductListDesktop{
|
||||
@apply hidden;
|
||||
}
|
||||
.menuNavigationProductListMobile{
|
||||
@apply hidden;
|
||||
@screen md {
|
||||
@apply hidden;
|
||||
}
|
||||
&.isShow{
|
||||
@apply block;
|
||||
}
|
||||
.menuNavigationProductModal{
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 10000;
|
||||
.content{
|
||||
@apply spacing-horizontal;
|
||||
margin-top: 3rem;
|
||||
padding-top: 2rem ;
|
||||
padding-bottom: 5rem;
|
||||
background-color: white;
|
||||
overflow: auto;
|
||||
height: 100%;
|
||||
border-radius: 2.4rem 2.4rem 0 0;
|
||||
.head{
|
||||
@apply flex justify-between;
|
||||
h3{
|
||||
@apply heading-3 font-bold;
|
||||
color:var(--text-base);
|
||||
}
|
||||
}
|
||||
button{
|
||||
margin-top: 2rem;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,57 @@
|
||||
import React, { useState } from 'react';
|
||||
import {ButtonCommon, MenuFilter, MenuNavigation} from 'src/components/common';
|
||||
import s from './MenuNavigationProductList.module.scss';
|
||||
import {IconHide} from 'src/components/icons';
|
||||
import MenuSort from './MenuSort/MenuSort';
|
||||
import {LANGUAGE} from 'src/utils/language.utils';
|
||||
import classNames from 'classnames'
|
||||
interface Props{
|
||||
categories:{name:string,link:string}[],
|
||||
brands:{name:string,link:string}[],
|
||||
featured:{name:string,link:string}[],
|
||||
}
|
||||
|
||||
const MenuNavigationProductList = ({categories,brands,featured}:Props)=>{
|
||||
|
||||
const [dataSort,setDataSort] = useState({});
|
||||
const [isShow,setIsShow] = useState(true);
|
||||
|
||||
function handleValue(value:Object){
|
||||
setDataSort({...dataSort,...value});
|
||||
}
|
||||
function filter(){
|
||||
console.log(dataSort)
|
||||
}
|
||||
|
||||
function hideMenu(){
|
||||
if(isShow === true){
|
||||
setIsShow(false);
|
||||
}
|
||||
}
|
||||
return(
|
||||
<>
|
||||
<div className={s.menuNavigationProductListDesktop}>
|
||||
<MenuNavigation categories={categories} heading="Categories"/>
|
||||
<MenuNavigation categories={brands} heading="Brands"/>
|
||||
<MenuNavigation categories={featured} heading="Featured"/>
|
||||
</div>
|
||||
<div className={classNames({ [s.menuNavigationProductListMobile] :true,[s.isShow]: isShow})}>
|
||||
<div className={s.menuNavigationProductModal}>
|
||||
<div className={s.content}>
|
||||
<div className={s.head}>
|
||||
<h3>FILTER</h3>
|
||||
<div onClick={hideMenu}><IconHide/></div>
|
||||
</div>
|
||||
<MenuFilter categories={categories} heading="Categories" type="category" onChangeValue={handleValue}/>
|
||||
<MenuFilter categories={brands} heading="Brand" type="brand" onChangeValue={handleValue}/>
|
||||
<MenuFilter categories={featured} heading="Featured" type="featured" onChangeValue={handleValue}/>
|
||||
<MenuSort heading="SORT BY" type="sort" onChangeValue={handleValue}/>
|
||||
<ButtonCommon size="large" onClick={filter}>{LANGUAGE.BUTTON_LABEL.CONFIRM}</ButtonCommon>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export default MenuNavigationProductList
|
||||
@ -0,0 +1,46 @@
|
||||
@import "../../../../styles/utilities";
|
||||
.menuSortWrapper{
|
||||
|
||||
@screen md {
|
||||
@apply hidden;
|
||||
}
|
||||
.menuSortHeading{
|
||||
@apply sub-headline font-bold ;
|
||||
color: var(--text-active);
|
||||
font-feature-settings: 'salt' on;
|
||||
margin: 0.8rem 0;
|
||||
}
|
||||
.menuSortList{
|
||||
box-sizing: border-box;
|
||||
&::after{
|
||||
@apply absolute;
|
||||
top: 110%;
|
||||
content: "";
|
||||
width: 100%;
|
||||
border-bottom: 1px solid var(--border-line);
|
||||
}
|
||||
li{
|
||||
div{
|
||||
height: 4.8rem;
|
||||
line-height: 4.8rem;
|
||||
padding: 0 1.6rem;
|
||||
margin-right: 0.8rem;
|
||||
border-radius: 0.8rem;
|
||||
&.active {
|
||||
@apply font-bold relative;
|
||||
color:var(--text-active);
|
||||
background-color: var(--primary-lightest);
|
||||
&::after{
|
||||
@apply absolute;
|
||||
content:"";
|
||||
background-image: url('/assets/svg/check.svg');
|
||||
right: 1.6rem;
|
||||
top: calc(50% - 24px/2);
|
||||
width: 2.4rem;
|
||||
height: 2.4rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,67 @@
|
||||
import classNames from 'classnames';
|
||||
import { useEffect, useState } from 'react';
|
||||
import { QUERY_KEY, ROUTE } from 'src/utils/constanst.utils';
|
||||
import s from './MenuSort.module.scss';
|
||||
|
||||
interface Props {
|
||||
children?: any,
|
||||
heading:string,
|
||||
type:string,
|
||||
onChangeValue?: (value: Object) => void
|
||||
}
|
||||
const SORT = [
|
||||
{
|
||||
name: 'By Name',
|
||||
link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.SORTBY}=by-name`,
|
||||
},
|
||||
{
|
||||
name: 'Price(High to Low)',
|
||||
link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.SORTBY}=high-to-low`,
|
||||
},
|
||||
{
|
||||
name: 'Price (Low to High)',
|
||||
link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.SORTBY}=low-to-high`,
|
||||
},
|
||||
{
|
||||
name: 'On Sale',
|
||||
link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.SORTBY}=on-sale`,
|
||||
},
|
||||
];
|
||||
|
||||
|
||||
const MenuSort = ({heading,type,onChangeValue}:Props)=> {
|
||||
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 (
|
||||
<section className={classNames(s.menuSortWrapper)}>
|
||||
<h2 className={classNames(s.menuSortHeading)}>{heading}</h2>
|
||||
<ul className={s.menuSortList}>
|
||||
{
|
||||
SORT.map(item => <li key={item.name}>
|
||||
<div onClick={()=> handleClick(item.link)} className={classNames({ [s.active]: item.link === active? true: false })}>
|
||||
{item.name}
|
||||
</div>
|
||||
</li>)
|
||||
}
|
||||
</ul>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
|
||||
export default MenuSort
|
||||
Loading…
x
Reference in New Issue
Block a user