minhnhat/uldp.edu.vn
1
0
Fork 0
forked from UKSOURCE/hailearning.edu.vn
Code Pull Requests 1 Activity

build ui header, footer, home page, about page

Browse Source
This commit is contained in:
Le Nhut Huy
2026-02-02 16:16:11 +07:00
parent 8d105dda9c
commit d24b9ed33e
38 changed files with 4336 additions and 451 deletions
Download Patch File Download Diff File Expand all files Collapse all files

89
app/components/home/BlogPreview.tsx Normal file
View File

@@ -0,0 +1,89 @@
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;