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

fix: fix css show hide for MenuNavigationProductList

Browse Source
This commit is contained in:
quangnhankie
2021-09-07 12:24:10 +07:00
parent 90f45b4334
commit 82fbb289c8
23 changed files with 275 additions and 494 deletions
Download Patch File Download Diff File Expand all files Collapse all files

43
src/components/common/MenuNavigationProductList/MenuNavigationProductList.module.scss Normal file
View File

@@ -0,0 +1,43 @@
@import "../../../styles/utilities";
.menuNavigationProductListDesktop{
@apply hidden;
}
.menuNavigationProductListMobile{
@apply hidden;
&.isShow{
@apply block;
@screen md {
@apply hidden;
}
}
.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%;
}
}
}
}

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

@@ -0,0 +1,60 @@
import React, { useState } from 'react';
import {ButtonCommon} from 'src/components/common';
import s from './MenuNavigationProductList.module.scss';
import MenuSort from './MenuSort/MenuSort';
import {LANGUAGE} from 'src/utils/language.utils';
import classNames from 'classnames'
import MenuFilter from '../MenuFilter/MenuFilter';
import MenuNavigation from '../MenuNavigation/MenuNavigation';
import IconHide from 'src/components/icons/IconHide';
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

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

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

67
src/components/common/MenuNavigationProductList/MenuSort/MenuSort.tsx Normal file
View File

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

0
src/components/modules/blogs/BlogContent/BlogContent.module.scss
View File

16
src/components/modules/blogs/BlogContent/BlogContent.tsx
View File

@@ -1,16 +0,0 @@
import React from 'react';
import { DateTime } from "src/components/common";
interface Props{
image:StaticImageData,
}
const BlogContent = ({}:Props) => {
return (
<>
<DateTime date="APRIL 30, 2021"/>
</>
)
}
export default BlogContent

18
src/components/modules/blogs/BlogDetailImg/BlogDetailImg.tsx
View File

@@ -1,18 +0,0 @@
import Image from "next/image";
import React from 'react';
interface Props{
image:StaticImageData,
}
const BlogDetailImg = ({image}:Props) => {
return (
<>
<Image src={image} />
</>
)
}
export default BlogDetailImg

BIN
src/components/modules/blogs/BlogDetailImg/img/blogdetail.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 709 KiB

1
src/components/modules/blogs/index.ts
View File

@@ -1 +0,0 @@
export { default as BlogDetailImg } from './BlogDetailImg/BlogDetailImg'

64
src/components/modules/recipes/RecipesList/RecipesItem/RecipesItem.module.scss
View File

@@ -1,64 +0,0 @@
@import "../../../../../styles/_utilities";
.recipesItem {
@apply flex justify-between;
margin: 1.5rem 0;
@screen md{
@apply block;
}
.recipesItemImage {
@apply transition-all duration-200;
width: 31%;
img {
@apply block object-cover;
width: 100%;
min-height: 12.5rem;
border-radius: 1.5rem;
}
@screen md {
@apply object-cover cursor-pointer;
width: 100%;
margin: 0 auto;
img{
height:100%;
border-radius: 2.4rem;
}
}
}
.recipesItemText {
width: 65%;
.recipesItemName{
@apply topline;
display: -webkit-box;
-webkit-line-clamp: 2;
overflow: hidden;
-webkit-box-orient: vertical;
font-feature-settings: "salt" on;
cursor: pointer;
font-weight:bold;
color:var(--text-active);
margin-bottom: 1rem;
&:hover {
color: var(--primary);
}
}
@screen md {
width: 100%;
}
}
.recipesItemDescription{
color:var(--text-label);
display: -webkit-box;
-webkit-line-clamp: 2;
overflow: hidden;
-webkit-box-orient: vertical;
}
}

35
src/components/modules/recipes/RecipesList/RecipesItem/RecipesItem.tsx
View File

@@ -1,35 +0,0 @@
import React from 'react';
import s from './RecipesItem.module.scss'
import classNames from 'classnames';
import Image from "next/image";
import Link from 'next/link';
interface RecipesItem {
image:StaticImageData,
name: string,
description:string,
link: string
}
const RecipesItem = ({ image, name,description, link }: RecipesItem) => {
return (
<div className={classNames(s.recipesItem)}>
<div className={classNames(s.recipesItemImage)}>
<Link href={link}>
<a>
<Image src={image} />
</a>
</Link>
</div>
<Link href={link}>
<a className={classNames(s.recipesItemText)}>
<div className={classNames(s.recipesItemName)}>{name}</div>
<div className={classNames(s.recipesItemDescription)}>{description}</div>
</a>
</Link>
</div >
)
}
export default RecipesItem

43
src/components/modules/recipes/RecipesList/RecipesList.module.scss
View File

@@ -1,43 +0,0 @@
@import "../../../../styles/_utilities";
.recipesListWrapper {
@screen md{
padding-bottom:5.6rem;
}
.recipesHead{
@apply flex justify-end;
@screen md{
@apply justify-between;
}
}
.recipesListBlogs{
@screen md {
@apply flex flex-col items-center justify-center;
}
.recipesList {
@screen md {
@apply flex justify-between flex-wrap;
margin: 1rem 0;
}
.recipesItem {
@screen md {
width: calc(97% / 2);
margin-top:4rem;
}
@screen lg{
width: calc(97% / 3);
margin-top:4rem;
}
}
}
}
.recipesPagination{
@apply flex justify-center;
margin: 3rem 0;
@screen md {
@apply flex justify-center;
margin:2rem 0;
}
}
}

51
src/components/modules/recipes/RecipesList/RecipesList.tsx
View File

@@ -1,51 +0,0 @@
import classNames from 'classnames';
import React from 'react';
import s from './RecipesList.module.scss';
import RecipesItem from './RecipesItem/RecipesItem';
import { PaginationCommon } from 'src/components/common';
interface Props{
recipes:{
id:string,
title:string,
image:StaticImageData,
description:string,
link:string
}[],
}
const RecipesList = ({recipes}:Props) => {
return (
<>
<div className={classNames(s.recipesListWrapper)}>
<div className={classNames(s.recipesHead)}>
</div>
<div className={classNames(s.recipesListBlogs)}>
<div className={classNames(s.recipesList)}>
{recipes?.map(item => (
<div key={item.id} className={classNames(s.recipesItem)}>
<RecipesItem
name={item.title}
image={item.image}
description={item.description}
link={item.link}
/>
</div>
))}
</div>
</div>
<div className={classNames(s.recipesPagination)}>
<PaginationCommon pageSize={6} total={9}/>
</div>
</div>
</>
)
}
export default RecipesList

79
src/components/modules/recipes/RecipesListPage/RecipesListPage.module.scss
View File

@@ -1,79 +0,0 @@
@import "../../../../styles/_utilities";
.recipesListPageWrapper{
@apply spacing-horizontal;
@screen md {
padding:0 3.2rem;
}
.recipesListPageBreadcrumbDesktop{
@apply hidden;
@screen md {
@apply block;
}
}
.recipesListPageHeadMobile{
margin-top: 2rem;
h2{
margin-bottom: 0.7rem;
}
@screen md {
@apply hidden;
padding: 3rem 0;
}
}
.recipesListPageMain{
@screen md {
@apply flex;
}
.categoriesDesktop{
@apply hidden;
@screen md {
@apply block;
width:25%;
}
}
.sortByMobile{
@apply flex justify-end;
}
.categoriesMobile{
ul{
@apply flex-nowrap ;
overflow: auto;
}
}
.recipesList{
@screen md {
width:75%;
}
.sortByDesktop{
@apply hidden;
@screen md {
@apply flex justify-between;
margin-top:1.5rem;
h2{
@apply heading-3;
}
}
@screen xl{
@apply flex justify-between;
h2{
@apply heading-2;
}
}
}
.selectMobile{
@apply flex justify-between;
margin: 2rem 0;
label{
@apply topline;
font-weight: bold;
}
@screen md {
@apply hidden;
}
}
}
}
}

175
src/components/modules/recipes/RecipesListPage/RecipesListPage.tsx
View File

@@ -1,175 +0,0 @@
import classNames from 'classnames';
import React from 'react';
import s from './RecipesListPage.module.scss';
import RecipesList from '../RecipesList/RecipesList';
import { Banner, MenuFilter } from 'src/components/common';
import {MenuNavigation} from 'src/components/common';
import { OPTION_ALL, QUERY_KEY, ROUTE } from 'src/utils/constanst.utils'
import BreadcrumbCommon from 'src/components/common/BreadcrumbCommon/BreadcrumbCommon';
import HeadingCommon from "../../../common/HeadingCommon/HeadingCommon";
import { SelectCommon } from 'src/components/common';
import {RECIPE_DATA_TEST} from '../../../../utils/demo-data';
import blog1 from './img/blog1.png';
import blog2 from './img/blog2.png';
import blog3 from './img/blog3.png';
import blog4 from './img/blog4.png';
import blog5 from './img/blog5.png';
import blog6 from './img/blog6.png';
const BREADCRUMB = [
{
name: 'Home',
link: "/",
},
{
name: 'Special Recipes',
link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.RECIPES}=malaysia`,
},
];
const CATEGORY = [
{
name: 'All',
link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.RECIPES}=${OPTION_ALL}`,
},
{
name: 'Malaysian',
link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.RECIPES}=malaysia`,
},
{
name: 'Vietnamese',
link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.RECIPES}=vietnamese`,
},
{
name: 'Thailand',
link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.RECIPES}=thailand`,
},
{
name: 'Indian',
link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.RECIPES}=indian`,
},
{
name: 'Lao',
link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.RECIPES}=lao`,
},
{
name: 'Chinese',
link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.RECIPES}=chinese`,
},
{
name: 'Korean',
link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.RECIPES}=korean`,
},
{
name: 'Japanese',
link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.RECIPES}=japanese`,
},
{
name: 'Western',
link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.RECIPES}=western`,
},
];
const RECIPES = [
{
id: '1',
image: blog1,
title: "Want to Lose Weight? Here are 10 DEBM Diet Guidelines for Beginners",
description: 'The DEBM diet stands for "Delicious Happy Fun Diet". This diet was popularized by Robert...',
link: `${ROUTE.PRODUCTS}?${QUERY_KEY.RECIPES}=veggie`
}, {
id: '2',
image: blog2,
title: "9 Ways to Make an Aloe Vera Mask at Home",
description: 'Aloe vera or aloe vera is a green plant, has thorns on the side of the skin with yellowish patches and...',
link: `${ROUTE.PRODUCTS}?${QUERY_KEY.RECIPES}=seafood`
}
, {
id: '3',
image: blog3,
title: "Don't Buy Wrong, Here Are 7 Ways to Choose a Ripe Dragon Fruit",
description: 'Aloe vera or aloe vera is a green plant, has thorns on the side of the skin with yellowish patches and...',
link: `${ROUTE.PRODUCTS}?${QUERY_KEY.RECIPES}=coffee-bean`
}
, {
id: '4',
image: blog4,
title: "Want to Lose Weight? Here are 10 DEBM Diet Guidelines for Beginners",
description: 'The DEBM diet stands for "Delicious Happy Fun Diet". This diet was popularized by Robert...',
link: `${ROUTE.PRODUCTS}?${QUERY_KEY.RECIPES}=sauce`,
}, {
id: '5',
image: blog5,
title: "9 Ways to Make an Aloe Vera Mask at Home",
description: 'Aloe vera or aloe vera is a green plant, has thorns on the side of the skin with yellowish patches and...',
link: `${ROUTE.PRODUCTS}?${QUERY_KEY.RECIPES}=sauce`,
}
, {
id: '6',
image: blog6,
title: "Don't Buy Wrong, Here Are 7 Ways to Choose a Ripe Dragon Fruit",
description: 'Dragon fruit is a type of fruit that is a favorite for many people because of its delicious and fresh...',
link: `${ROUTE.PRODUCTS}?${QUERY_KEY.RECIPES}=sauce`,
}
];
const OPTIONSLECT=[
{
name:"SORT BY 1"
},
{
name:"SORT BY 2"
},
{
name:"SORT BY 3"
},
]
const RecipesListPage = () => {
return (
<div className={classNames(s.recipesListPageWrapper)}>
<Banner title={'SPECIAL RECIPE OF THE WEEK'} subtitle={'Last call! Shop deep deals on 100+ bulk picks while you can.'} imgLink={'assets/bannerrecipes.png'} size="large"/>
<div className={classNames(s.recipesListPageBreadcrumbDesktop)}>
<BreadcrumbCommon crumbs={BREADCRUMB} />
</div>
<div className={classNames(s.recipesListPageHeadMobile)}>
<div className={classNames(s.heading)}>
<HeadingCommon align='left'>SPECIAL RECIPES</HeadingCommon>
<BreadcrumbCommon crumbs={BREADCRUMB} />
</div>
</div>
<div className={classNames(s.recipesListPageMain)}>
<div className={classNames(s.categoriesDesktop)}>
<MenuNavigation categories={CATEGORY} heading="Categories"/>
</div>
<div className={classNames(s.recipesList)}>
<div className={classNames(s.sortByDesktop)}>
<HeadingCommon align='left'>SPECIAL RECIPES</HeadingCommon>
<SelectCommon option={OPTIONSLECT} placeHolder="SORT BY"/>
</div>
<div className={classNames(s.selectMobile)}>
<div>
<label htmlFor="">Categories</label>
<SelectCommon option={CATEGORY} placeHolder="Categories"/>
</div>
<div>
<label htmlFor="">Sort By</label>
<SelectCommon option={OPTIONSLECT} placeHolder="Sort by"/>
</div>
</div>
<RecipesList recipes={RECIPES}/>
</div>
</div>
</div>
)
}
export default RecipesListPage

BIN
src/components/modules/recipes/RecipesListPage/img/blog1.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 169 KiB

BIN
src/components/modules/recipes/RecipesListPage/img/blog2.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 152 KiB

BIN
src/components/modules/recipes/RecipesListPage/img/blog3.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 94 KiB

BIN
src/components/modules/recipes/RecipesListPage/img/blog4.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 180 KiB

BIN
src/components/modules/recipes/RecipesListPage/img/blog5.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 187 KiB

BIN
src/components/modules/recipes/RecipesListPage/img/blog6.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 198 KiB

1
src/components/modules/recipes/index.ts
View File

@@ -1 +0,0 @@
export { default as RecipesListPage } from './RecipesListPage/RecipesListPage'