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

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
Download Patch File Download Diff File Expand all files Collapse all files

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'