enhance: link card blog

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 {
+export interface BlogCardProps extends BlogProps {
-    link: string,
+  // 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}>
+      <Link href={`${ROUTE.BLOG_DETAIL}/${slug}`}>
-        <div className={s.image}>
+        <a>
-          <img src={imageSrc} alt="image cardblog" />
+          <div className={s.image}>
-        </div>
+            <img src={imageSrc} alt="image cardblog" />
+          </div>
+        </a>
       </Link>
-      <Link href={link}>
+      <Link href={`${ROUTE.BLOG_DETAIL}/${slug}`}>
-        <div className={s.title}>{title}</div>
+        <a>
+          <div className={s.title}>{title}</div>
+        </a>
       </Link>
       <div className={s.description}>{description}</div>
     </div>

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) => {

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