Initial Burmddit deployment - AI news aggregator in Burmese

frontend/components/ArticleCard.tsx

@@ -0,0 +1,67 @@
+import Link from 'next/link'
+import Image from 'next/image'
+
+interface Article {
+  id: number
+  title_burmese: string
+  slug: string
+  excerpt_burmese: string
+  category_name_burmese: string
+  category_slug: string
+  reading_time: number
+  published_at: string
+  featured_image?: string
+}
+
+export default function ArticleCard({ article }: { article: Article }) {
+  const publishedDate = new Date(article.published_at).toLocaleDateString('my-MM', {
+    year: 'numeric',
+    month: 'long',
+    day: 'numeric'
+  })
+
+  return (
+    <article className="bg-white rounded-lg shadow hover:shadow-lg transition-shadow duration-200 overflow-hidden article-card">
+      <Link href={`/article/${article.slug}`}>
+        {article.featured_image && (
+          <div className="relative h-48 w-full">
+            <Image
+              src={article.featured_image}
+              alt={article.title_burmese}
+              fill
+              className="object-cover"
+            />
+          </div>
+        )}
+        
+        <div className="p-6">
+          {/* Category Badge */}
+          <Link 
+            href={`/category/${article.category_slug}`}
+            className="inline-block px-3 py-1 bg-primary-100 text-primary-700 rounded-full text-sm font-medium font-burmese mb-3 hover:bg-primary-200"
+            onClick={(e) => e.stopPropagation()}
+          >
+            {article.category_name_burmese}
+          </Link>
+
+          {/* Title */}
+          <h2 className="text-xl font-bold text-gray-900 mb-2 font-burmese hover:text-primary-600 line-clamp-2">
+            {article.title_burmese}
+          </h2>
+
+          {/* Excerpt */}
+          <p className="text-gray-600 mb-4 font-burmese line-clamp-3 leading-relaxed">
+            {article.excerpt_burmese}
+          </p>
+
+          {/* Meta */}
+          <div className="flex items-center text-sm text-gray-500 space-x-4">
+            <span>{publishedDate}</span>
+            <span>•</span>
+            <span className="font-burmese">{article.reading_time} မိနစ်</span>
+          </div>
+        </div>
+      </Link>
+    </article>
+  )
+}