feat: ArticleCard component

2026-05-28 22:29:19 +07:00
parent 6ba2c8b932
commit 50a4e63e2a
3 changed files with 103 additions and 11 deletions
@@ -0,0 +1,42 @@
+import Image from 'next/image'
+import Link from 'next/link'
+import { getAssetUrl } from '@/lib/directus'
+import type { Article } from '@/lib/types'
+
+interface Props {
+  article: Article
+}
+
+export default function ArticleCard({ article }: Props) {
+  const href = `/${article.category.slug}/${article.slug}`
+
+  return (
+    <Link
+      href={href}
+      className="group block bg-bg-card border border-border rounded-md overflow-hidden hover:border-[#3a4560] transition-colors"
+    >
+      <div className="relative aspect-video bg-bg-elevated overflow-hidden">
+        {article.featured_image ? (
+          <Image
+            src={getAssetUrl(article.featured_image, { width: 640, quality: 80 })}
+            alt={article.title}
+            fill
+            className="object-cover"
+            sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
+          />
+        ) : (
+          <div className="w-full h-full bg-bg-elevated" />
+        )}
+      </div>
+      <div className="p-3">
+        <p className="text-[10px] font-semibold text-text-muted uppercase tracking-widest mb-1.5">
+          {article.category.name}
+        </p>
+        <h3 className="text-sm font-semibold text-text-primary leading-snug mb-3 line-clamp-2 group-hover:text-accent transition-colors">
+          {article.title}
+        </h3>
+        <span className="text-xs font-semibold text-accent">Read →</span>
+      </div>
+    </Link>
+  )
+}