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

feat: Refactor blog components and add pagination

Browse Source
This commit is contained in:
Wini_Fy
2026-02-03 17:05:09 +07:00
parent bf652a64b6
commit 29cc0bf2cd
27 changed files with 2051 additions and 429 deletions
Download Patch File Download Diff File Expand all files Collapse all files

138
app/blog/components/NewsList.tsx
View File

@@ -1,92 +1,62 @@
import Link from "next/link";
import type { BlogPost } from "@/types/blog";
import { getCmsImageUrl } from "@/utils";
interface NewsListProps {
blogs?: BlogPost[];
categorySlug?: string;
tagSlug?: string;
}
export default function NewsList({ blogs = [], categorySlug, tagSlug }: NewsListProps) {
// Use blogs from props (already filtered by API)
const posts = blogs;
// Additional client-side filtering if needed (though API should handle this)
if (categorySlug || tagSlug) {
// If filters are provided but blogs are not pre-filtered, filter here
// This is a fallback - ideally API should handle filtering
}
export default function NewsList() {
return (
<div className="col-lg-8 col-12">
{/* News Post 1 */}
<div className="news-standard-post">
<div className="news-image">
<img src="/assets/img/home-1/news/news-13.jpg" alt="img" />
{posts.map((post, index) => (
<div
key={post.slug}
className={`news-standard-post ${index === posts.length - 1 ? "mb-0" : ""}`}
>
<div className="news-image">
<img
src={
post.featuredImage
? getCmsImageUrl(post.featuredImage)
: "/assets/img/inner-page/news-details/details-1.jpg"
}
alt={post.title}
/>
</div>
<div className="news-content">
<ul className="news-list">
<li>
<i className="fa-solid fa-user"></i> By {post.author}
</li>
<li>
<i className="fa-solid fa-calendar-days"></i> {post.publishedAt}
</li>
<li>
<i className="fa-solid fa-comments"></i> {post.commentsCount} Comments
</li>
</ul>
<h3>
<Link href={`/blog/${post.slug}`}>{post.title}</Link>
</h3>
<p>{post.excerpt}</p>
<Link href={`/blog/${post.slug}`} className="theme-btn">
VIEW MORE <i className="fa-solid fa-arrow-right"></i>
</Link>
</div>
</div>
<div className="news-content">
<ul className="news-list">
<li>
<i className="fa-solid fa-user"></i> By Admin
</li>
<li>
<i className="fa-solid fa-calendar-days"></i> 11 March 2025
</li>
<li>
<i className="fa-solid fa-comments"></i> 0 Comments
</li>
</ul>
<h3>
<Link href="/news-details">How to Avoid Common Mistakes in Visa Applications</Link>
</h3>
<p>
A business consultant provides expert guidance, strategic planning, and problem-solving support—helping startups avoid mistakes, grow faster, and operate more efficiently from day one.
</p>
<Link href="/blog/news-details" className="theme-btn">
VIEW MORE <i className="fa-solid fa-arrow-right"></i>
</Link>
</div>
</div>
{/* News Post 2 */}
<div className="news-standard-post">
<div className="news-image">
<img src="/assets/img/home-1/news/news-14.jpg" alt="img" />
</div>
<div className="news-content">
<ul className="news-list">
<li>
<i className="fa-solid fa-user"></i> By Admin
</li>
<li>
<i className="fa-solid fa-calendar-days"></i> 11 March 2025
</li>
<li>
<i className="fa-solid fa-comments"></i> 0 Comments
</li>
</ul>
<h3>
<Link href="/news-details">The Role of Immigration Consultants in Your Journey</Link>
</h3>
<p>
Immigration consultants play a vital role in guiding applicants, simplifying complex processes, offering expert advice, and ensuring successful outcomes for study, work, or permanent residency abroad.
</p>
<Link href="/blog/news-details" className="theme-btn">
VIEW MORE <i className="fa-solid fa-arrow-right"></i>
</Link>
</div>
</div>
{/* News Post 3 */}
<div className="news-standard-post mb-0">
<div className="news-image">
<img src="/assets/img/home-1/news/news-15.jpg" alt="img" />
</div>
<div className="news-content">
<ul className="news-list">
<li>
<i className="fa-solid fa-user"></i> By Admin
</li>
<li>
<i className="fa-solid fa-calendar-days"></i> 11 March 2025
</li>
<li>
<i className="fa-solid fa-comments"></i> 0 Comments
</li>
</ul>
<h3>
<Link href="/news-details">Latest Immigration Policy Updates You Should Know</Link>
</h3>
<p>
Stay informed with the latest immigration policy updates, ensuring you understand new rules, visa requirements, and opportunities that impact your study, work, or migration journey abroad.
</p>
<Link href="/blog/news-details" className="theme-btn">
VIEW MORE <i className="fa-solid fa-arrow-right"></i>
</Link>
</div>
</div>
))}
</div>
);
}