38 lines
875 B
TypeScript
38 lines
875 B
TypeScript
import type { ArticleItem } from '../../data/types'
|
|
|
|
/**
|
|
* 明细页图文卡：上图下文的白卡。
|
|
* 传入 onOpen 时整张卡变成按钮，点击进入文章详情。
|
|
*/
|
|
type CesCardProps = {
|
|
item: ArticleItem
|
|
onOpen?: (itemId: string) => void
|
|
}
|
|
|
|
export function CesCard({ item, onOpen }: CesCardProps) {
|
|
const content = (
|
|
<>
|
|
<img className="ces-cover" src={item.cover} alt={item.title} loading="lazy" />
|
|
<span className="ces-body">
|
|
<span className="ces-title">{item.title}</span>
|
|
<span className="ces-desc">{item.desc}</span>
|
|
</span>
|
|
</>
|
|
)
|
|
|
|
if (onOpen === undefined) {
|
|
return <article className="ces-card">{content}</article>
|
|
}
|
|
|
|
return (
|
|
<button
|
|
type="button"
|
|
className="ces-card"
|
|
title={item.title}
|
|
onClick={() => onOpen(item.id)}
|
|
>
|
|
{content}
|
|
</button>
|
|
)
|
|
}
|