forked from minzeyaphyo/burmddit
70 lines
2.1 KiB
TypeScript
70 lines
2.1 KiB
TypeScript
'use client'
|
|
|
|
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>
|
|
)
|
|
}
|