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

feat: implement initial home page with dynamic content, API, and dedicated components.

Browse Source
This commit is contained in:
Wini_Fy
2026-02-05 15:56:06 +07:00
parent 857d250435
commit 11f435378f
8 changed files with 189 additions and 102 deletions
Download Patch File Download Diff File Expand all files Collapse all files

87
app/components/home/BlogPreview.tsx
View File

@@ -1,3 +1,4 @@
import { getCmsImageUrl } from '@/utils/image';
import Link from 'next/link';
interface BlogPreviewProps {
@@ -46,40 +47,66 @@ const BlogPreview = ({ data }: BlogPreviewProps) => {
</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>
{data.items.map((item, index) => {
const thumbUrl = getCmsImageUrl(item.thumbnail);
return (
<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={thumbUrl}
alt="img"
style={{
width: '419px',
height: '312px',
objectFit: 'cover'
}}
/>
<span>{item.category}</span>
<div className="news-layer-wrapper">
<div className="news-layer-image" style={{ backgroundImage: `url('${thumbUrl}')`, width: '419px', height: '312px' }}></div>
<div className="news-layer-image" style={{ backgroundImage: `url('${thumbUrl}')`, width: '419px', height: '312px' }}></div>
<div className="news-layer-image" style={{ backgroundImage: `url('${thumbUrl}')`, width: '419px', height: '312px' }}></div>
<div className="news-layer-image" style={{ backgroundImage: `url('${thumbUrl}')`, width: '419px', height: '312px' }}></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">
<div
style={{
width: '32px',
height: '32px',
backgroundColor: '#d1d5db',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
fontSize: '14px',
fontWeight: 'bold',
color: '#374151',
marginRight: '10px'
}}
>
{item.author.name.charAt(0).toUpperCase()}
</div>
<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>
<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>