enhance: link card blog

This commit is contained in:
lytrankieio123 2021-09-08 16:16:53 +07:00
parent ac5de0d4b5
commit 24e0173619
3 changed files with 29 additions and 16 deletions

View File

@ -1,21 +1,27 @@
import Link from 'next/link' import Link from 'next/link'
import React from 'react' 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' 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 ( return (
<div className={s.cardBlogWarpper}> <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>
<Link href={link}> <Link href={`${ROUTE.BLOG_DETAIL}/${slug}`}>
<div className={s.title}>{title}</div> <a>
<div className={s.title}>{title}</div>
</a>
</Link> </Link>
<div className={s.description}>{description}</div> <div className={s.description}>{description}</div>
</div> </div>

View File

@ -20,34 +20,34 @@ interface RelevantProps {
const recipe:BlogCardProps[] = [ const recipe:BlogCardProps[] = [
{ {
title: "Want to Lose Weight? Here are 10 DEBM Diet Guidelines for Beginners", 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...", description:"The DEBM diet stands for "+'"Delicious Happy Fun Diet"'+". This diet was popularized by Robert...",
imageSrc: image15.src, imageSrc: image15.src,
link: `${ROUTE.BLOG_DETAIL}`
},{ },{
title: "9 Ways to Make an Aloe Vera Mask at Home", 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...", 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, imageSrc: image16.src,
link: `${ROUTE.BLOG_DETAIL}`
},{ },{
title: "Don't Buy Wrong, Here Are 7 Ways to Choose a Ripe Dragon Fruit", 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...", description:"Dragon fruit is a type of fruit that is a favorite for many people because of its delicious and fresh...",
imageSrc: image17.src, imageSrc: image17.src,
link: `${ROUTE.BLOG_DETAIL}`
},{ },{
title: "Want to Lose Weight? Here are 10 DEBM Diet Guidelines for Beginners", 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...", description:"The DEBM diet stands for "+'"Delicious Happy Fun Diet"'+". This diet was popularized by Robert...",
imageSrc: image15.src, imageSrc: image15.src,
link: `${ROUTE.BLOG_DETAIL}`
},{ },{
title: "9 Ways to Make an Aloe Vera Mask at Home", 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...", 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, imageSrc: image16.src,
link: `${ROUTE.BLOG_DETAIL}`
},{ },{
title: "Don't Buy Wrong, Here Are 7 Ways to Choose a Ripe Dragon Fruit", 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...", description:"Dragon fruit is a type of fruit that is a favorite for many people because of its delicious and fresh...",
imageSrc: image17.src, imageSrc: image17.src,
link: `${ROUTE.BLOG_DETAIL}`
}] }]
const RelevantBlogPosts = ({ data = recipe, itemKey="detail-relevant", title="Relevant Blog Posts", bgcolor = "default" }: RelevantProps) => { const RelevantBlogPosts = ({ data = recipe, itemKey="detail-relevant", title="Relevant Blog Posts", bgcolor = "default" }: RelevantProps) => {

View File

@ -24,4 +24,11 @@ export interface RecipeProps {
imageSrc: string imageSrc: string
} }
export interface BlogProps {
title: string
slug: string
description: string
imageSrc: string
}
export type MouseAndTouchEvent = MouseEvent | TouchEvent export type MouseAndTouchEvent = MouseEvent | TouchEvent