forked from UKSOURCE/hailearning.edu.vn
90 lines
4.0 KiB
TypeScript
90 lines
4.0 KiB
TypeScript
import Link from 'next/link';
|
|
|
|
interface BlogPreviewProps {
|
|
data: {
|
|
heading: string;
|
|
subheading: string;
|
|
ctaButton: {
|
|
label: string;
|
|
href: string;
|
|
};
|
|
items: {
|
|
title: string;
|
|
excerpt: string;
|
|
category: string;
|
|
date: string;
|
|
author: {
|
|
name: string;
|
|
avatar: string;
|
|
};
|
|
comments: number;
|
|
link: string;
|
|
thumbnail: string;
|
|
}[];
|
|
};
|
|
}
|
|
|
|
const BlogPreview = ({ data }: BlogPreviewProps) => {
|
|
const formatDate = (dateString: string) => {
|
|
const date = new Date(dateString);
|
|
return date.toLocaleDateString('en-US', { day: 'numeric', month: 'long', year: 'numeric' });
|
|
};
|
|
|
|
return (
|
|
<section className="news-section section-padding fix">
|
|
<div className="container">
|
|
<div className="section-title-area">
|
|
<div className="section-title">
|
|
<span className="sub-title wow fadeInUp">{data.subheading}</span>
|
|
<h2 className="split-text-right split-text-in-right">
|
|
{data.heading}
|
|
</h2>
|
|
</div>
|
|
<Link href={data.ctaButton.href} className="theme-btn wow fadeInUp" data-wow-delay=".3s">
|
|
{data.ctaButton.label}
|
|
<i className="fa-solid fa-arrow-right"></i>
|
|
</Link>
|
|
</div>
|
|
<div className="row">
|
|
{data.items.map((item, index) => (
|
|
<div key={index} className="col-xl-4 col-lg-6 col-md-6 wow fadeInUp" data-wow-delay={`.${(index + 1) * 2 + 1}s`}>
|
|
<div className="news-card-item">
|
|
<div className="news-image">
|
|
<img src={item.thumbnail} alt="img" />
|
|
<span>{item.category}</span>
|
|
<div className="news-layer-wrapper">
|
|
<div className="news-layer-image" style={{ backgroundImage: `url('${item.thumbnail}')` }}></div>
|
|
<div className="news-layer-image" style={{ backgroundImage: `url('${item.thumbnail}')` }}></div>
|
|
<div className="news-layer-image" style={{ backgroundImage: `url('${item.thumbnail}')` }}></div>
|
|
<div className="news-layer-image" style={{ backgroundImage: `url('${item.thumbnail}')` }}></div>
|
|
</div>
|
|
</div>
|
|
<div className="news-content">
|
|
<div className="list">
|
|
<span>Comment ({item.comments.toString().padStart(2, '0')})</span>
|
|
<span>_ {formatDate(item.date)}</span>
|
|
</div>
|
|
<h3>
|
|
<Link href={item.link}>
|
|
{item.title}
|
|
</Link>
|
|
</h3>
|
|
<div className="news-bottom">
|
|
<div className="info-item">
|
|
<img src={item.author.avatar} alt="img" />
|
|
<span>By {item.author.name}</span>
|
|
</div>
|
|
<Link href={item.link} className="link-btn">View Articles<i className="fa-solid fa-arrow-right"></i></Link>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
export default BlogPreview;
|