+ )
+}
+
+export default BlogPostCarousel
diff --git a/src/components/common/RelevantBlogPosts/RelevantBlogPosts.module.scss b/src/components/common/RelevantBlogPosts/RelevantBlogPosts.module.scss
new file mode 100644
index 000000000..d5a13299d
--- /dev/null
+++ b/src/components/common/RelevantBlogPosts/RelevantBlogPosts.module.scss
@@ -0,0 +1,16 @@
+@import '../../../styles/utilities';
+
+.blogPostWarpper {
+ padding-top: 5.6rem;
+ padding-bottom: 5.2rem;
+ @apply flex flex-col;
+ .top {
+ @apply spacing-horizontal flex w-full justify-between;
+ padding-bottom: 3.2rem;
+ @screen xl {
+ .right {
+ margin-right: 2.476rem;
+ }
+ }
+ }
+}
diff --git a/src/components/common/RelevantBlogPosts/RelevantBlogPosts.tsx b/src/components/common/RelevantBlogPosts/RelevantBlogPosts.tsx
new file mode 100644
index 000000000..01e19bb25
--- /dev/null
+++ b/src/components/common/RelevantBlogPosts/RelevantBlogPosts.tsx
@@ -0,0 +1,69 @@
+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 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
+}
+
+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" }: RelevantProps) => {
+ return (
+
+
+
+ {title}
+
+
+
+
+
+
+
+
+
+ )
+ }
+
+ export default RelevantBlogPosts
\ No newline at end of file
diff --git a/src/components/common/index.ts b/src/components/common/index.ts
index 19bd0fa6b..56896f790 100644
--- a/src/components/common/index.ts
+++ b/src/components/common/index.ts
@@ -32,6 +32,9 @@ export { default as ModalConfirm} from "./ModalConfirm/ModalConfirm"
export { default as ModalInfo} from "./ModalInfo/ModalInfo"
export { default as ProductList} from "./ProductList/ProductList"
export { default as ModalCreateUserInfo} from './ModalCreateUserInfo/ModalCreateUserInfo'
+export { default as CardBlog} from './CardBlog/CardBlog'
+export { default as RelevantBlogPosts} from './RelevantBlogPosts/RelevantBlogPosts'
+export { default as CollapseCommon} from './CollapseCommon/CollapseCommon'
export { default as ImgWithLink} from './ImgWithLink/ImgWithLink'
export { default as RecipeDetail} from './RecipeDetail/RecipeDetail'
export { default as DrawerCommon} from './DrawerCommon/DrawerCommon'
diff --git a/src/components/modules/blogs/BlogDetailPage/BlogDetailPage.tsx b/src/components/modules/blogs/BlogDetailPage/BlogDetailPage.tsx
index 30796a65a..486e6ac97 100644
--- a/src/components/modules/blogs/BlogDetailPage/BlogDetailPage.tsx
+++ b/src/components/modules/blogs/BlogDetailPage/BlogDetailPage.tsx
@@ -7,7 +7,12 @@ import s from './BlogDetailPage.module.scss';
import BlogContent from '../BlogContent/BlogContent';
import { BlogDetailImg } from '..';
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'
const BLOGDETAIL=
{
@@ -28,6 +33,39 @@ const CRUMBS =[
}
]
+const recipe = [
+ {
+ 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 (
<>
@@ -48,7 +86,9 @@ const BlogDetailPage = () => {
imageAuthor={BLOGDETAIL.imageAuthor}
nameAuthor={BLOGDETAIL.nameAuthor}/>
-
+