forked from UKSOURCE/hailearning.edu.vn
49 lines
1.8 KiB
TypeScript
49 lines
1.8 KiB
TypeScript
type NewsCardProps = {
|
|
category: string;
|
|
date: string;
|
|
title: string;
|
|
excerpt: string;
|
|
image?: string;
|
|
icon?: string;
|
|
};
|
|
|
|
export default function NewsCard({ category, date, title, excerpt, image, icon }: NewsCardProps) {
|
|
return (
|
|
<article className="bg-white rounded-xl border border-ui-border overflow-hidden shadow-soft hover:shadow-hover hover:border-brand-blue/50 transition-all group flex flex-col">
|
|
{/* Thumbnail */}
|
|
<div className="h-48 overflow-hidden relative">
|
|
{image ? (
|
|
<img
|
|
className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500"
|
|
src={image}
|
|
alt={title}
|
|
/>
|
|
) : (
|
|
<div className="w-full h-full bg-brand-light flex items-center justify-center">
|
|
<i className={`${icon} text-4xl text-brand-blue/40`}></i>
|
|
</div>
|
|
)}
|
|
<div className="absolute top-4 left-4">
|
|
<span className="px-3 py-1 bg-white/90 backdrop-blur-sm text-brand-blue rounded-md text-xs font-bold shadow-sm">
|
|
{category}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Content */}
|
|
<div className="p-6 flex flex-col flex-1">
|
|
<div className="text-xs text-ui-muted mb-3 flex items-center gap-2">
|
|
<i className="far fa-calendar"></i> {date}
|
|
</div>
|
|
<div className="blog-card-title text-ui-text group-hover:text-brand-blue transition-colors mb-3 leading-tight font-bold">
|
|
{title}
|
|
</div>
|
|
<p className="text-sm text-ui-muted mb-6 flex-1 line-clamp-3">{excerpt}</p>
|
|
<a href="#" className="text-sm font-bold text-brand-blue flex items-center gap-1 group-hover:gap-2 transition-all pt-4">
|
|
Read more <i className="fas fa-arrow-right text-xs"></i>
|
|
</a>
|
|
</div>
|
|
</article>
|
|
);
|
|
}
|