44 lines
1.3 KiB
TypeScript
44 lines
1.3 KiB
TypeScript
import './styles.css'
|
|
|
|
import cx from 'classnames'
|
|
import { Date } from './Date'
|
|
import { IImage } from 'src/types'
|
|
import Link from 'next/link'
|
|
|
|
export interface IArticleCardProps {
|
|
style?: React.CSSProperties
|
|
article: any
|
|
preview?: IImage
|
|
}
|
|
|
|
export const ArticleCard: React.FC<IArticleCardProps> = ({ article, ...props }) => (
|
|
<div className="ArticleCard" style={props.style}>
|
|
<Link href={article.url}>
|
|
<a className="invisible">
|
|
<div className="ArticleCard-image">
|
|
{!props.preview ? null : (
|
|
<picture>
|
|
<img
|
|
className={cx({ opa: false })}
|
|
alt={props.preview.alt}
|
|
src={props.preview.src}
|
|
srcSet={props.preview.srcSet.map(({ url, density }) => `${url} ${density}x`).join(' ')}
|
|
/>
|
|
</picture >
|
|
)}
|
|
</div>
|
|
|
|
<div className="ArticleCard-body">
|
|
{article.title}
|
|
|
|
{!article.date ? null : (
|
|
<Date>
|
|
{article.date}
|
|
</Date>
|
|
)}
|
|
</div>
|
|
</a>
|
|
</Link>
|
|
</div>
|
|
)
|