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

feat: create components BlogDetalImg BlogContent BlogDetailPage

Browse Source
This commit is contained in:
quangnhankie
2021-09-08 11:38:36 +07:00
parent b44ca8cb50 670343c06c
commit ae5e7e8d43
11 changed files with 158 additions and 106 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
src/components/modules/blogs/BlogDetailImg/BlogDetailImg.module.scss Normal file
View File

@@ -0,0 +1,3 @@
.image{
width: 100%;
}

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

@@ -1,17 +1,15 @@
import React from 'react';
import s from './BlogDetailImg.module.scss';
interface Props{
image:string,
alt?:string
}
const BlogDetailImg = ({image,alt}:Props) => {
return (
<>
<img src={image} alt={alt} />
<img className={s.image} src={image} alt={alt} />
</>
)
}

7
src/components/modules/blogs/BlogDetailPage/BlogDetailPage.module.scss
View File

@@ -3,9 +3,14 @@
padding: 0 0 3.2rem 3.2rem;
}
.blogDetailPageWrapper{
padding: 0 2rem;
@screen md {
width: 90%;
margin:0 auto;
}
@screen xl{
width: 60%;
margin: 0 auto;
margin:0 auto;
}
.avt{
margin-bottom: 4rem;

4
src/components/modules/blogs/BlogDetailPage/BlogDetailPage.tsx
View File

@@ -33,7 +33,7 @@ const CRUMBS =[
}
]
const recipe = [
const BLOGS = [
{
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...",
@@ -87,7 +87,7 @@ const BlogDetailPage = () => {
nameAuthor={BLOGDETAIL.nameAuthor}/>
</div>
<div className={s.relevantBlogPosts}>
<RelevantBlogPosts title="You will like also" />
<RelevantBlogPosts data={BLOGS} title="You will like also" bgcolor="cream"/>
</div>
</>

79
src/components/modules/recipes/RecipeListPage/RecipeListPage.tsx
View File

@@ -25,45 +25,89 @@ const BREADCRUMB = [
];
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 CATEGORYSELECT = [
{
name: 'All',
link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.RECIPES}=${OPTION_ALL}`,
value: `${ROUTE.PRODUCTS}/?${QUERY_KEY.RECIPES}=${OPTION_ALL}`,
},
{
name: 'Malaysian',
link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.RECIPES}=malaysia`,
value: `${ROUTE.PRODUCTS}/?${QUERY_KEY.RECIPES}=malaysia`,
},
{
name: 'Vietnamese',
link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.RECIPES}=vietnamese`,
value: `${ROUTE.PRODUCTS}/?${QUERY_KEY.RECIPES}=vietnamese`,
},
{
name: 'Thailand',
link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.RECIPES}=thailand`,
value: `${ROUTE.PRODUCTS}/?${QUERY_KEY.RECIPES}=thailand`,
},
{
name: 'Indian',
link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.RECIPES}=indian`,
value: `${ROUTE.PRODUCTS}/?${QUERY_KEY.RECIPES}=indian`,
},
{
name: 'Lao',
link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.RECIPES}=lao`,
value: `${ROUTE.PRODUCTS}/?${QUERY_KEY.RECIPES}=lao`,
},
{
name: 'Chinese',
link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.RECIPES}=chinese`,
value: `${ROUTE.PRODUCTS}/?${QUERY_KEY.RECIPES}=chinese`,
},
{
name: 'Korean',
link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.RECIPES}=korean`,
value: `${ROUTE.PRODUCTS}/?${QUERY_KEY.RECIPES}=korean`,
},
{
name: 'Japanese',
link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.RECIPES}=japanese`,
value: `${ROUTE.PRODUCTS}/?${QUERY_KEY.RECIPES}=japanese`,
},
{
name: 'Western',
link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.RECIPES}=western`,
value: `${ROUTE.PRODUCTS}/?${QUERY_KEY.RECIPES}=western`,
},
];
@@ -112,13 +156,16 @@ const RECIPES = [
const OPTIONSLECT=[
{
name:"SORT BY 1"
name:"SORT BY 1",
value:"1"
},
{
name:"SORT BY 2"
name:"SORT BY 2",
value:"2"
},
{
name:"SORT BY 3"
name:"SORT BY 3",
value:"3"
},
]
const BANNER =[
@@ -155,16 +202,16 @@ const RecipesListPage = () => {
<div className={s.recipesList}>
<div className={s.sortByDesktop}>
<HeadingCommon align='left'>SPECIAL RECIPES</HeadingCommon>
<SelectCommon option={OPTIONSLECT} />
<SelectCommon option={OPTIONSLECT} placeholder="Sort By" />
</div>
<div className={s.selectMobile}>
<div>
<label htmlFor="">Categories</label>
<SelectCommon option={CATEGORY}/>
<SelectCommon option={CATEGORYSELECT} placeholder="Categories"/>
</div>
<div>
<label htmlFor="">Sort By</label>
<SelectCommon option={OPTIONSLECT} />
<SelectCommon option={OPTIONSLECT} placeholder="Sort By" />
</div>
</div>
<RecipesList recipes={RECIPES}/>