first commit

components/ArticleCard.tsx

@@ -0,0 +1,52 @@
+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;