mirror of
https://github.com/vercel/commerce.git
synced 2025-07-26 19:51:23 +00:00
feat: get-blog-detail and relevant blogs
This commit is contained in:
Quangnhankie
@@ -5,7 +5,9 @@
|
||||
.authorImage {
|
||||
width:3.2rem;
|
||||
height:3.2rem;
|
||||
border-radius:3.2rem;
|
||||
img{
|
||||
border-radius:3.2rem !important;
|
||||
}
|
||||
div{
|
||||
min-width:3.2rem !important;
|
||||
}
|
||||
|
||||
@@ -14,40 +14,7 @@ interface RelevantProps {
|
||||
bgcolor?: "default" | "cream"
|
||||
}
|
||||
|
||||
const recipe:BlogCardProps[] = [
|
||||
{
|
||||
title: "Want to Lose Weight? Here are 10 DEBM Diet Guidelines for Beginners",
|
||||
slug: 'have-a-nice-lunch',
|
||||
description:"The DEBM diet stands for "+'"Delicious Happy Fun Diet"'+". This diet was popularized by Robert...",
|
||||
imageSrc: "https://user-images.githubusercontent.com/46085455/133185783-8100ef4e-7a72-4dc1-bb12-2ca46b56b393.png",
|
||||
},{
|
||||
title: "9 Ways to Make an Aloe Vera Mask at Home",
|
||||
slug: 'have-a-nice-lunch',
|
||||
description:"Aloe vera or aloe vera is a green plant, has thorns on the side of the skin with yellowish patches and...",
|
||||
imageSrc: "https://user-images.githubusercontent.com/46085455/133185911-df505d10-fdcd-4312-add3-7c62ad8af71e.png",
|
||||
},{
|
||||
title: "Don't Buy Wrong, Here Are 7 Ways to Choose a Ripe Dragon Fruit",
|
||||
slug: 'have-a-nice-lunch',
|
||||
description:"Dragon fruit is a type of fruit that is a favorite for many people because of its delicious and fresh...",
|
||||
imageSrc: "https://user-images.githubusercontent.com/46085455/133185959-7ad75580-ca6d-4684-83d9-3f64500bbc97.png",
|
||||
},{
|
||||
title: "Want to Lose Weight? Here are 10 DEBM Diet Guidelines for Beginners",
|
||||
slug: 'have-a-nice-lunch',
|
||||
description:"The DEBM diet stands for "+'"Delicious Happy Fun Diet"'+". This diet was popularized by Robert...",
|
||||
imageSrc: "https://user-images.githubusercontent.com/46085455/133185783-8100ef4e-7a72-4dc1-bb12-2ca46b56b393.png",
|
||||
},{
|
||||
title: "9 Ways to Make an Aloe Vera Mask at Home",
|
||||
slug: 'have-a-nice-lunch',
|
||||
description:"Aloe vera or aloe vera is a green plant, has thorns on the side of the skin with yellowish patches and...",
|
||||
imageSrc: "https://user-images.githubusercontent.com/46085455/133185911-df505d10-fdcd-4312-add3-7c62ad8af71e.png",
|
||||
},{
|
||||
title: "Don't Buy Wrong, Here Are 7 Ways to Choose a Ripe Dragon Fruit",
|
||||
slug: 'have-a-nice-lunch',
|
||||
description:"Dragon fruit is a type of fruit that is a favorite for many people because of its delicious and fresh...",
|
||||
imageSrc: "https://user-images.githubusercontent.com/46085455/133185959-7ad75580-ca6d-4684-83d9-3f64500bbc97.png",
|
||||
}]
|
||||
|
||||
const RelevantBlogPosts = ({ data = recipe, itemKey="detail-relevant", title="Relevant Blog Posts", bgcolor = "default" }: RelevantProps) => {
|
||||
const RelevantBlogPosts = ({ data , itemKey="detail-relevant", title="Relevant Blog Posts", bgcolor = "default" }: RelevantProps) => {
|
||||
return (
|
||||
<div className={classNames({
|
||||
[s.blogPostWarpper] : true,
|
||||
@@ -63,7 +30,7 @@ const recipe:BlogCardProps[] = [
|
||||
</div>
|
||||
</div>
|
||||
<div className={s.bot}>
|
||||
<BlogPostCarousel data={data} itemKey={itemKey} />
|
||||
<BlogPostCarousel data={data} itemKey={itemKey} />}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
|
||||
@@ -9,57 +9,24 @@ import Link from 'next/link';
|
||||
interface BlogContentProps {
|
||||
className?: string
|
||||
children?: any,
|
||||
title?: string,
|
||||
content?: string,
|
||||
imgAuthor?: string,
|
||||
date?: string,
|
||||
authorName?: string,
|
||||
}
|
||||
const BlogContent = ({}:BlogContentProps) => {
|
||||
const BlogContent = ({title,date='',content,imgAuthor='',authorName='' }:BlogContentProps) => {
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className={s.blogContentWrapper}>
|
||||
<DateTime date="APRIL 30, 2021"/>
|
||||
<h1>The Best Sesame Soy Broccoli Salad</h1>
|
||||
<DateTime date={date}/>
|
||||
<h1>{title}</h1>
|
||||
<div className={s.author}>
|
||||
<Author image={imageAuthor.src} name="Alessandro Del Piero" />
|
||||
<Author image={imgAuthor} name={authorName} />
|
||||
</div>
|
||||
<section className={s.content}>
|
||||
|
||||
<p> When you’re trying to eat healthier but want something more substantial than a leafy green salad, broccoli salad is there for you. I love the crunch and heft of broccoli, especially when it’s cut up into bite size spoonable pieces.
|
||||
<br/>
|
||||
<br/>
|
||||
|
||||
Some people aren’t into raw broccoli, but I love it! I always go for the raw broccoli on those vegetable platters that seem to be at every potluck/party you go to.
|
||||
<br/>
|
||||
<br/>
|
||||
This is a simple broccoli salad: you have the bulk of it, raw broccoli; crunchy red onions for a bit of acidity and raw crunch, craisins for sweetness, almonds for a nutty counter point; and a sweet and tangy soy-rice vinegar-sesame dressing.
|
||||
</p>
|
||||
|
||||
<br/>
|
||||
<br/>
|
||||
|
||||
<h2 className={s.heading2}>What is broccoli salad</h2>
|
||||
<br/>
|
||||
<p> When you’re trying to eat healthier but want something more substantial than a leafy green salad, broccoli salad is there for you. I love the crunch and heft of broccoli, especially when it’s cut up into bite size spoonable pieces.
|
||||
<br/>
|
||||
<br/>
|
||||
|
||||
Some people aren’t into raw broccoli, but I love it! I always go for the raw broccoli on those vegetable platters that seem to be at every potluck/party you go to.
|
||||
<br/>
|
||||
<br/>
|
||||
This is a simple broccoli salad: you have the bulk of it, raw broccoli; crunchy red onions for a bit of acidity and raw crunch, craisins for sweetness, almonds for a nutty counter point; and a sweet and tangy soy-rice vinegar-sesame dressing.
|
||||
</p>
|
||||
|
||||
<br/>
|
||||
<br/>
|
||||
|
||||
<h2 className={s.heading2}>What about broccoli stems?</h2>
|
||||
<br/>
|
||||
<p>
|
||||
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/>
|
||||
|
||||
<figure>
|
||||
<ImgWithLink src="https://user-images.githubusercontent.com/89437339/133046625-bdf9cc0d-6f22-43e5-a49d-d4d34df19cf2.jpg" alt="blog-detail" />
|
||||
</figure>
|
||||
|
||||
{content}
|
||||
</section>
|
||||
|
||||
<div className={s.boxShare}>
|
||||
|
||||
@@ -5,7 +5,8 @@ import BreadcrumbCommon from 'src/components/common/BreadcrumbCommon/BreadcrumbC
|
||||
import s from './BlogDetailImg.module.scss';
|
||||
interface Props {
|
||||
className?: string
|
||||
children?: any
|
||||
children?: any,
|
||||
imgSrc?:string
|
||||
}
|
||||
|
||||
const CRUMBS =[
|
||||
@@ -14,14 +15,14 @@ const CRUMBS =[
|
||||
link:"/blog"
|
||||
}
|
||||
]
|
||||
const BlogDetailImg = ({}:Props ) => {
|
||||
const BlogDetailImg = ({imgSrc = ''}:Props ) => {
|
||||
return (
|
||||
<>
|
||||
<div className={s.beadcrumb}>
|
||||
<BreadcrumbCommon crumbs={CRUMBS} />
|
||||
</div>
|
||||
<div className={s.image}>
|
||||
<ImgWithLink src="https://user-images.githubusercontent.com/89437339/133044532-8b5f9442-841b-4187-84b4-d6cc66676b52.png" alt="Ảnh đại diện"/>
|
||||
<ImgWithLink src={imgSrc} alt="avatar"/>
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
|
||||
Reference in New Issue
Block a user