53 lines
1.4 KiB
TypeScript
53 lines
1.4 KiB
TypeScript
import Image from 'next/image';
|
|
import { VscEye, VscHeart, VscComment } from 'react-icons/vsc';
|
|
|
|
import { Article } from '@/types';
|
|
|
|
import styles from '@/styles/ArticleCard.module.css';
|
|
|
|
interface ArticleCardProps {
|
|
article: Article;
|
|
}
|
|
|
|
const ArticleCard = ({ article }: ArticleCardProps) => {
|
|
return (
|
|
<a
|
|
href={article.url}
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
className={styles.container}
|
|
>
|
|
<div className={styles.imageWrapper}>
|
|
<Image
|
|
src={article.cover_image}
|
|
alt={article.title}
|
|
fill
|
|
sizes="(max-width: 768px) 100vw, 300px"
|
|
className={styles.image}
|
|
/>
|
|
<div className={styles.viewsBadge}>
|
|
<VscEye /> {article.page_views_count}
|
|
</div>
|
|
</div>
|
|
<div className={styles.content}>
|
|
<h3 className={styles.title}>{article.title}</h3>
|
|
<p className={styles.description}>{article.description}</p>
|
|
|
|
<div className={styles.footer}>
|
|
<div className={styles.stats}>
|
|
<div className={styles.stat}>
|
|
<VscHeart className={styles.icon} />{' '}
|
|
{article.public_reactions_count}
|
|
</div>
|
|
<div className={styles.stat}>
|
|
<VscComment className={styles.icon} /> {article.comments_count}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
);
|
|
};
|
|
|
|
export default ArticleCard;
|