mirror of
https://github.com/vercel/commerce.git
synced 2025-07-22 04:14:18 +00:00
enhance: link card blog
This commit is contained in:
parent
ac5de0d4b5
commit
24e0173619
@ -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>
|
||||
|
@ -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) => {
|
||||
|
@ -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
|
Loading…
x
Reference in New Issue
Block a user