mirror of
https://github.com/vercel/commerce.git
synced 2025-07-22 04:14:18 +00:00
75 lines
2.9 KiB
TypeScript
75 lines
2.9 KiB
TypeScript
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 classNames from 'classnames'
|
|
import React from 'react'
|
|
import { HeadingCommon, ViewAllItem } from 'src/components/common'
|
|
import { BlogCardProps } from 'src/components/common/CardBlog/CardBlog'
|
|
import BlogPostCarousel from './BlogPostCarousel/BlogPostCarousel'
|
|
import s from './RelevantBlogPosts.module.scss'
|
|
import { ROUTE } from 'src/utils/constanst.utils';
|
|
|
|
interface RelevantProps {
|
|
data?: BlogCardProps[],
|
|
itemKey?: string,
|
|
title?: string,
|
|
viewAllLink?: string,
|
|
bgcolor?: "default" | "cream"
|
|
}
|
|
|
|
const recipe:BlogCardProps[] = [
|
|
{
|
|
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 RelevantBlogPosts = ({ data = recipe, itemKey="detail-relevant", title="Relevant Blog Posts", bgcolor = "default" }: RelevantProps) => {
|
|
return (
|
|
<div className={classNames({
|
|
[s.blogPostWarpper] : true,
|
|
[s[bgcolor]] : bgcolor,
|
|
})}
|
|
>
|
|
<div className={s.top}>
|
|
<div className={s.left}>
|
|
<HeadingCommon>{title}</HeadingCommon>
|
|
</div>
|
|
<div className={s.right}>
|
|
<ViewAllItem link="#"/>
|
|
</div>
|
|
</div>
|
|
<div className={s.bot}>
|
|
<BlogPostCarousel data={data} itemKey={itemKey} />
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default RelevantBlogPosts |