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

refactor: BlogDetailpage

Browse Source
This commit is contained in:
quangnhankie 2021-09-09 14:15:21 +07:00
parent ee82d5b578
commit 606f3e5e81
15 changed files with 117 additions and 153 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
pages/blog/[slug].tsx Normal file
View File

@ -0,0 +1,17 @@
import { Layout, RelevantBlogPosts } from 'src/components/common';
import BlogContent from 'src/components/modules/blog-detail/BlogContent/BlogContent';
import BlogDetailImg from 'src/components/modules/blog-detail/BlogDetailImg/BlogDetailImg';
import { RECIPE_DATA_TEST } from 'src/utils/demo-data'
export default function BlogDetailPage() {
return (
<>
<BlogDetailImg/>
<BlogContent/>
<RelevantBlogPosts data={RECIPE_DATA_TEST} title="You will like also" bgcolor="cream"/>
</>
)
}
BlogDetailPage.Layout = Layout

4
pages/recipes.tsx
View File

@ -3,7 +3,7 @@ import RecipeListBanner from 'src/components/modules/recipes-list/RecipeListBann
import RecipesList from 'src/components/modules/recipes-list/RecipesList/RecipesList';
export default function Recipes() {
export default function RecipeListPage() {
return (
<>
<RecipeListBanner />
@ -12,4 +12,4 @@ export default function Recipes() {
)
}
Recipes.Layout = Layout
RecipeListPage.Layout = Layout

31
src/components/modules/blogs/BlogContent/BlogContent.module.scss → src/components/modules/blog-detail/BlogContent/BlogContent.module.scss
View File

@ -1,19 +1,42 @@
@import "../../../../styles/_utilities";
.blogContentWrapper{
width: 100%;
padding: 0 2rem;
@screen md {
width: 90%;
margin:0 auto;
}
@screen xl{
width: 63%;
margin:0 auto;
}
h1{
@apply heading-2;
}
h2{
@apply heading-3;
}
h3{
@apply heading-3;
}
h1,h2,h3,h4{
color:var(--text-base);
font-family: var(--font-heading);
}
.author{
padding: 2rem 0;
}
.content{
.heading2{
@apply heading-3 ;
}
img{
width: 100%;
border-radius: 2.4rem;
}
}
.boxShare{

17
src/components/modules/blogs/BlogContent/BlogContent.tsx → src/components/modules/blog-detail/BlogContent/BlogContent.tsx
View File

@ -4,21 +4,20 @@ import IconFacebook from 'src/components/icons/IconFacebook';
import IconInstagram from 'src/components/icons/IconInstagram';
import IconTwitter from 'src/components/icons/IconTwitter';
import s from './BlogContent.module.scss';
import imageAuthor from '../../../common/Author/img/author.png';
import Link from 'next/link';
interface BlogContentProps {
date: string,
title: string,
imageAuthor:string,
nameAuthor:string,
className?: string
children?: any,
}
const BlogContent = ({date,title,imageAuthor,nameAuthor}:BlogContentProps) => {
const BlogContent = ({}:BlogContentProps) => {
return (
<>
<div className={s.blogContentWrapper}>
<DateTime date={date}/>
<h1 className={s.title}>{title}</h1>
<DateTime date="APRIL 30, 2021"/>
<h1>The Best Sesame Soy Broccoli Salad</h1>
<div className={s.author}>
<Author image={imageAuthor} name={nameAuthor} />
<Author image={imageAuthor.src} name="Alessandro Del Piero" />
</div>
<section className={s.content}>
@ -56,7 +55,7 @@ const BlogContent = ({date,title,imageAuthor,nameAuthor}:BlogContentProps) => {
You can eat broccoli stems. In fact, they are delicious. Just use a peeler to peel off the outsides and then trim the stalks into small 1/4”-1/2” cubes.
</p>
<br/>
<img src="https://user-images.githubusercontent.com/76729908/131634880-8ae1437b-d3f8-421e-a546-d5a4f9a28e5f.png" alt="blog-detail" />
<img src="https://i.pinimg.com/236x/f0/bd/a6/f0bda6a9ed04a6c4ac9453be80c95f75.jpg" alt="blog-detail" />
</section>

21
src/components/modules/blog-detail/BlogDetailImg/BlogDetailImg.module.scss Normal file
View File

@ -0,0 +1,21 @@
.beadcrumb{
padding-left: 3.2rem;
padding-bottom: 3.2rem;
}
.image{
width: 100%;
padding: 0 2rem;
margin-bottom: 2rem;
border-radius: 2.4rem;
@screen md {
width: 90%;
margin:0 auto;
margin-bottom: 4rem;
}
@screen xl{
width: 63%;
margin:0 auto;
margin-bottom: 4rem;
}
}

27
src/components/modules/blog-detail/BlogDetailImg/BlogDetailImg.tsx Normal file
View File

@ -0,0 +1,27 @@
import React from 'react';
import BreadcrumbCommon from 'src/components/common/BreadcrumbCommon/BreadcrumbCommon';
import s from './BlogDetailImg.module.scss';
interface Props {
className?: string
children?: any
}
const CRUMBS =[
{
name:"Blog",
link:"/blog"
}
]
const BlogDetailImg = ({}:Props ) => {
return (
<>
<div className={s.beadcrumb}>
<BreadcrumbCommon crumbs={CRUMBS} />
</div>
<img className={s.image} src="https://i.pinimg.com/564x/3d/42/94/3d429429428377070c4f91844a8d8755.jpg" alt="Ảnh đại diện" />
</>
)
}
export default BlogDetailImg

0
src/components/modules/blogs/BlogDetailImg/img/blogdetail.png → src/components/modules/blog-detail/BlogDetailImg/img/blogdetail.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 709 KiB

After

Width:  |  Height:  |  Size: 709 KiB

2
src/components/modules/blog-detail/index.ts Normal file
View File

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

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

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

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

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

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

@ -1,18 +0,0 @@
@import "../../../../styles/_utilities";
.beadcrumb{
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;
}
.avt{
margin-bottom: 4rem;
}
}

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

@ -1,93 +0,0 @@
import React from 'react';
import BreadcrumbCommon from 'src/components/common/BreadcrumbCommon/BreadcrumbCommon';
import RelevantBlogPosts from 'src/components/common/RelevantBlogPosts/RelevantBlogPosts';
import { ROUTE } from 'src/utils/constanst.utils';
import image15 from '../../../../../public/assets/images/image15.png';
import image16 from '../../../../../public/assets/images/image16.png';
import image17 from '../../../../../public/assets/images/image17.png';
import imageAuthor from '../../../common/Author/img/author.png';
import BlogContent from '../BlogContent/BlogContent';
import BlogDetailImg from '../BlogDetailImg/BlogDetailImg';
import avt from '../BlogDetailImg/img/blogdetail.png';
import s from './BlogDetailPage.module.scss';
const BLOGDETAIL=
{
date:'APRIL 30, 2021',
title:'The Best Sesame Soy Broccoli Salad',
imageAuthor:imageAuthor.src,
nameAuthor:'Alessandro Del Piero',
};
const CRUMBS =[
{
name:"HOME",
link:"/"
},
{
name:"BLOG",
link:"/blog"
}
]
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...",
imageSrc: image15.src,
link: `${ROUTE.BLOG_DETAIL}`
},{
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...",
imageSrc: image16.src,
link: `${ROUTE.BLOG_DETAIL}`
},{
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...",
imageSrc: image17.src,
link: `${ROUTE.BLOG_DETAIL}`
},{
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...",
imageSrc: image15.src,
link: `${ROUTE.BLOG_DETAIL}`
},{
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...",
imageSrc: image16.src,
link: `${ROUTE.BLOG_DETAIL}`
},{
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...",
imageSrc: image17.src,
link: `${ROUTE.BLOG_DETAIL}`
}];
const BlogDetailPage = () => {
return (
<>
<div className={s.beadcrumb}>
<BreadcrumbCommon crumbs={CRUMBS}/>
</div>
<div className={s.blogDetailPageWrapper}>
<figure className={s.avt}>
<BlogDetailImg
image={avt.src}
alt="ảnh đại diện"
/>
</figure>
<BlogContent
date={BLOGDETAIL.date}
title={BLOGDETAIL.title}
imageAuthor={BLOGDETAIL.imageAuthor}
nameAuthor={BLOGDETAIL.nameAuthor}/>
</div>
<div className={s.relevantBlogPosts}>
<RelevantBlogPosts data={BLOGS} title="You will like also" bgcolor="cream"/>
</div>
</>
)
}
export default BlogDetailPage

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

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

18
src/utils/demo-data.ts
View File

@ -185,31 +185,37 @@ export const RECIPE_DATA_TEST: RecipeCardProps[] = [
{
title: "Special Recipe of Vietnamese Phở",
description: "Alright, before we get to the actual recipe, let’s chat for a sec about the ingredients. To make this pho soup recipe, you will need:",
imageSrc: 'https://user-images.githubusercontent.com/76729908/132159257-f92574c7-d00d-4142-8ea7-0ca9515fb737.png'
imageSrc: 'https://user-images.githubusercontent.com/76729908/132159257-f92574c7-d00d-4142-8ea7-0ca9515fb737.png',
slug: "special-recipe-of-vietnamese-pho"
},
{
title: "Original Recipe of Curry",
description: "Chicken curry is common to several countries including India, countries in Asia and the Caribbean. My favorite of them though is this aromatic Indian...",
imageSrc: 'https://user-images.githubusercontent.com/76729908/132159259-ae4c986d-ab53-4758-9137-d06bafdd15d0.png'
imageSrc: 'https://user-images.githubusercontent.com/76729908/132159259-ae4c986d-ab53-4758-9137-d06bafdd15d0.png',
slug:"original-recipe-of-curry"
},
{
title: "The Best Recipe of Beef Noodle Soup",
description: "The broth for Bun Bo Hue is prepared by slowly simmering various types of beef and pork bones (ox tail, beef shank, pork neck bones, pork feet,...",
imageSrc: 'https://user-images.githubusercontent.com/76729908/132159262-f28a9fb9-4852-47e6-80b5-d600521b548a.png'
imageSrc: 'https://user-images.githubusercontent.com/76729908/132159262-f28a9fb9-4852-47e6-80b5-d600521b548a.png',
slug:"the-best-recipe-of-beef-noodle-soup"
},
{
title: "Special Recipe of Vietnamese Phở",
description: "Alright, before we get to the actual recipe, let’s chat for a sec about the ingredients. To make this pho soup recipe, you will need:",
imageSrc: 'https://user-images.githubusercontent.com/76729908/132159257-f92574c7-d00d-4142-8ea7-0ca9515fb737.png'
imageSrc: 'https://user-images.githubusercontent.com/76729908/132159257-f92574c7-d00d-4142-8ea7-0ca9515fb737.png',
slug: "special-recipe-of-vietnamese-pho"
},
{
title: "Original Recipe of Curry",
description: "Chicken curry is common to several countries including India, countries in Asia and the Caribbean. My favorite of them though is this aromatic Indian...",
imageSrc: 'https://user-images.githubusercontent.com/76729908/132159259-ae4c986d-ab53-4758-9137-d06bafdd15d0.png'
imageSrc: 'https://user-images.githubusercontent.com/76729908/132159259-ae4c986d-ab53-4758-9137-d06bafdd15d0.png',
slug:"original-recipe-of-curry"
},
{
title: "The Best Recipe of Beef Noodle Soup",
description: "The broth for Bun Bo Hue is prepared by slowly simmering various types of beef and pork bones (ox tail, beef shank, pork neck bones, pork feet,...",
imageSrc: 'https://user-images.githubusercontent.com/76729908/132159262-f28a9fb9-4852-47e6-80b5-d600521b548a.png'
imageSrc: 'https://user-images.githubusercontent.com/76729908/132159262-f28a9fb9-4852-47e6-80b5-d600521b548a.png',
slug:"the-best-recipe-of-beef-noodle-soup"
},
]

1
src/utils/types.utils.ts
View File

@ -20,6 +20,7 @@ export interface FeaturedProductProps {
export interface RecipeProps {
title: string
slug: string
description: string
imageSrc: string
}