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

feat: create modules RecipesList and RecipesListPage

Browse Source
This commit is contained in:
quangnhankie 2021-09-07 12:28:52 +07:00
parent 82fbb289c8
commit fb52871d37
13 changed files with 448 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -0,0 +1,64 @@
@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 Normal file
View File

@ -0,0 +1,35 @@
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 Normal file
View File

@ -0,0 +1,43 @@
@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 Normal file
View File

@ -0,0 +1,51 @@
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 Normal file
View File

@ -0,0 +1,79 @@
@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 Normal file
View File

@ -0,0 +1,175 @@
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 Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 169 KiB

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 152 KiB

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 94 KiB

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 180 KiB

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 187 KiB

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 198 KiB

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

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