From 65a74b3608a52abe2ae986b900b4b39b21a358ab Mon Sep 17 00:00:00 2001
From: lytrankieio123 <lytran@kie.io>
Date: Wed, 8 Sep 2021 16:04:28 +0700
Subject: [PATCH 1/3] :fire: remove: link in collapse title

:%s
---
 pages/test.tsx                                            | 4 ----
 .../common/CollapseCommon/CollapseChild/CollapseChild.tsx | 8 ++------
 src/components/common/CollapseCommon/CollapseCommon.tsx   | 4 ++--
 3 files changed, 4 insertions(+), 12 deletions(-)

diff --git a/pages/test.tsx b/pages/test.tsx
index 5afc61235..403bc7b9d 100644
--- a/pages/test.tsx
+++ b/pages/test.tsx
@@ -106,7 +106,6 @@ const COLLAPSE_DATA = [
       "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.",
       "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.",
     ],
-    link: "/title"
   },
   {
     title: "This is a subtitle",
@@ -115,7 +114,6 @@ const COLLAPSE_DATA = [
       "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.",
       "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.",
     ],
-    link: "/title"
   },
   {
     title: "This is a subtitle",
@@ -124,7 +122,6 @@ const COLLAPSE_DATA = [
       "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.",
       "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.",
     ],
-    link: "/title"
   },
   {
     title: "This is a subtitle",
@@ -133,7 +130,6 @@ const COLLAPSE_DATA = [
       "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.",
       "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.",
     ],
-    link: "/title"
   },
 ]
 export default function Test() {
diff --git a/src/components/common/CollapseCommon/CollapseChild/CollapseChild.tsx b/src/components/common/CollapseCommon/CollapseChild/CollapseChild.tsx
index 22cbcda10..53cd70cf3 100644
--- a/src/components/common/CollapseCommon/CollapseChild/CollapseChild.tsx
+++ b/src/components/common/CollapseCommon/CollapseChild/CollapseChild.tsx
@@ -2,15 +2,13 @@ import s from './CollapseChild.module.scss'
 import { useState } from 'react'
 import classNames from 'classnames'
 import CollapseContent from './CollapseContent/CollapseContent'
-import Link from 'next/link'
 
 interface CollapseProps{
     title?: string,
     content: Array<string>,
     isToggle?: boolean,
-    link?: string,
 }
-const CollapseChild = ({title, content, isToggle=false, link="/"}: CollapseProps) => {
+const CollapseChild = ({title, content, isToggle=false}: CollapseProps) => {
     const [isActive, changeActive] = useState(isToggle)
 
     const handleToggle = () => {
@@ -24,9 +22,7 @@ const CollapseChild = ({title, content, isToggle=false, link="/"}: CollapseProps
             onClick = { handleToggle }
         >    
             <div className={s.title}>
-                <Link href={link}>
-                    <a>{title}</a>
-                </Link>
+                <h4>{title}</h4>
                 <div className={s.toggle}></div>
             </div>
             <div className={s.contentContainer}>
diff --git a/src/components/common/CollapseCommon/CollapseCommon.tsx b/src/components/common/CollapseCommon/CollapseCommon.tsx
index 98030ffce..e695a6576 100644
--- a/src/components/common/CollapseCommon/CollapseCommon.tsx
+++ b/src/components/common/CollapseCommon/CollapseCommon.tsx
@@ -1,7 +1,7 @@
 import CollapseChild from './CollapseChild/CollapseChild'
 
 interface CollapseCommonProps{
-    data: {title: string, content: Array<string>, link: string}[],
+    data: {title: string, content: Array<string>}[],
 }
 
 const CollapseCommon = ({data}: CollapseCommonProps) => {
@@ -9,7 +9,7 @@ const CollapseCommon = ({data}: CollapseCommonProps) => {
         <section>
             {
                 data.map(item =>
-                    <CollapseChild key={item.title} title={item.title} content={item.content} link={item.link} />
+                    <CollapseChild key={item.title} title={item.title} content={item.content}/>
                 )
             }
         </section>

From ac5de0d4b52e189786a8352ffdc8724204400960 Mon Sep 17 00:00:00 2001
From: lytrankieio123 <lytran@kie.io>
Date: Wed, 8 Sep 2021 16:09:05 +0700
Subject: [PATCH 2/3] enhance: link to all blogs

---
 src/components/common/RelevantBlogPosts/RelevantBlogPosts.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/common/RelevantBlogPosts/RelevantBlogPosts.tsx b/src/components/common/RelevantBlogPosts/RelevantBlogPosts.tsx
index aa6c1e393..80618a721 100644
--- a/src/components/common/RelevantBlogPosts/RelevantBlogPosts.tsx
+++ b/src/components/common/RelevantBlogPosts/RelevantBlogPosts.tsx
@@ -62,7 +62,7 @@ const recipe:BlogCardProps[] = [
             <HeadingCommon>{title}</HeadingCommon>
           </div>
           <div className={s.right}>
-            <ViewAllItem link="#"/>
+            <ViewAllItem link={ROUTE.BLOGS}/>
           </div>
         </div>
         <div className={s.bot}>

From 24e017361922cc3741f7a13d3ae7bb2a85d77732 Mon Sep 17 00:00:00 2001
From: lytrankieio123 <lytran@kie.io>
Date: Wed, 8 Sep 2021 16:16:53 +0700
Subject: [PATCH 3/3] enhance: link card blog

---
 src/components/common/CardBlog/CardBlog.tsx   | 26 ++++++++++++-------
 .../RelevantBlogPosts/RelevantBlogPosts.tsx   | 12 ++++-----
 src/utils/types.utils.ts                      |  7 +++++
 3 files changed, 29 insertions(+), 16 deletions(-)

diff --git a/src/components/common/CardBlog/CardBlog.tsx b/src/components/common/CardBlog/CardBlog.tsx
index 17a796bc4..314a6a1fd 100644
--- a/src/components/common/CardBlog/CardBlog.tsx
+++ b/src/components/common/CardBlog/CardBlog.tsx
@@ -1,21 +1,27 @@
 import Link from 'next/link'
 import React from 'react'
-import { RecipeProps } from 'src/utils/types.utils'
+import { ROUTE } from 'src/utils/constanst.utils'
+import { BlogProps } from 'src/utils/types.utils'
 import s from './CardBlog.module.scss'
-export interface BlogCardProps extends RecipeProps {
-    link: string,
+export interface BlogCardProps extends BlogProps {
+  // todo: edit when intergrate API
+
 }
 
-const CardBlog = ({ imageSrc, title, description, link }: BlogCardProps) => {
+const CardBlog = ({ imageSrc, title, description, slug }: BlogCardProps) => {
   return (
     <div className={s.cardBlogWarpper}>
-      <Link href={link}>
-        <div className={s.image}>
-          <img src={imageSrc} alt="image cardblog" />
-        </div>
+      <Link href={`${ROUTE.BLOG_DETAIL}/${slug}`}>
+        <a>
+          <div className={s.image}>
+            <img src={imageSrc} alt="image cardblog" />
+          </div>
+        </a>
       </Link>
-      <Link href={link}>
-        <div className={s.title}>{title}</div>
+      <Link href={`${ROUTE.BLOG_DETAIL}/${slug}`}>
+        <a>
+          <div className={s.title}>{title}</div>
+        </a>
       </Link>
       <div className={s.description}>{description}</div>
     </div>
diff --git a/src/components/common/RelevantBlogPosts/RelevantBlogPosts.tsx b/src/components/common/RelevantBlogPosts/RelevantBlogPosts.tsx
index 80618a721..1d71a6ca1 100644
--- a/src/components/common/RelevantBlogPosts/RelevantBlogPosts.tsx
+++ b/src/components/common/RelevantBlogPosts/RelevantBlogPosts.tsx
@@ -20,34 +20,34 @@ interface RelevantProps {
 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: image15.src,
-    link: `${ROUTE.BLOG_DETAIL}`
 },{
     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: image16.src,
-    link: `${ROUTE.BLOG_DETAIL}`
 },{
     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: image17.src,
-    link: `${ROUTE.BLOG_DETAIL}`
 },{
     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: image15.src,
-    link: `${ROUTE.BLOG_DETAIL}`
 },{
     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: image16.src,
-    link: `${ROUTE.BLOG_DETAIL}`
 },{
     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: image17.src,
-    link: `${ROUTE.BLOG_DETAIL}`
 }]
 
   const RelevantBlogPosts = ({ data = recipe, itemKey="detail-relevant", title="Relevant Blog Posts", bgcolor = "default" }: RelevantProps) => {
diff --git a/src/utils/types.utils.ts b/src/utils/types.utils.ts
index c87305f2b..d6f1b47ad 100644
--- a/src/utils/types.utils.ts
+++ b/src/utils/types.utils.ts
@@ -24,4 +24,11 @@ export interface RecipeProps {
     imageSrc: string
 }
 
+export interface BlogProps {
+    title: string
+    slug: string
+    description: string
+    imageSrc: string
+}
+
 export type MouseAndTouchEvent = MouseEvent | TouchEvent
\ No newline at end of file