refactor: BlogDetailpage

pages/blog/[slug].tsx

@@ -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

pages/recipes.tsx

@@ -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

src/components/modules/blog-detail/BlogContent/BlogContent.module.scss

@@ -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{

src/components/modules/blog-detail/BlogContent/BlogContent.tsx

@@ -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,
+    className?: string
-    title: string,
+    children?: any,
-    imageAuthor:string,
-    nameAuthor:string,
 }
-const BlogContent = ({date,title,imageAuthor,nameAuthor}:BlogContentProps) => {
+const BlogContent = ({}:BlogContentProps) => {
     return (
         <>
              <div className={s.blogContentWrapper}>
-                <DateTime date={date}/>
+                <DateTime date="APRIL 30, 2021"/>
-                <h1 className={s.title}>{title}</h1>
+                <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>
                   

src/components/modules/blog-detail/BlogDetailImg/BlogDetailImg.module.scss

@@ -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;
+    }
+  
+}

src/components/modules/blog-detail/BlogDetailImg/BlogDetailImg.tsx

@@ -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

src/components/modules/blog-detail/index.ts

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

src/components/modules/blogs/BlogDetailImg/BlogDetailImg.module.scss

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

src/components/modules/blogs/BlogDetailImg/BlogDetailImg.tsx

@@ -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

src/components/modules/blogs/BlogDetailPage/BlogDetailPage.module.scss

@@ -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;
-    }
-}

src/components/modules/blogs/BlogDetailPage/BlogDetailPage.tsx

@@ -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

src/components/modules/blogs/index.ts

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

src/utils/demo-data.ts

@@ -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"
     },
 ]

src/utils/types.utils.ts

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