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

112
app/blog/components/Sidebar.tsx
View File

@@ -1,14 +1,35 @@
import Link from "next/link";
import { fetchCategories, fetchRecentBlogs, fetchPopularTags } from "@/api/blog";
interface SidebarProps {
searchQuery?: string;
}
export default async function Sidebar({ searchQuery }: SidebarProps) {
// Fetch data from API
const [categoriesResponse, recentBlogsResponse, tagsResponse] = await Promise.all([
fetchCategories(),
fetchRecentBlogs(5),
fetchPopularTags(10),
]);
const categories = categoriesResponse.data;
const recentPosts = recentBlogsResponse.data;
const tags = tagsResponse.data;
export default function Sidebar() {
return (
<div className="col-lg-4 col-12">
<div className="main-sideber">
{/* Search Widget */}
<div className="news-sideber-box">
<div className="search-widget">
<form action="#">
<input type="text" placeholder="Search Blog" />
<form action="/blog" method="GET">
<input
type="text"
name="search"
placeholder="Search Blog"
defaultValue={searchQuery || ""}
/>
<button type="submit">
<i className="fa-solid fa-magnifying-glass"></i>
</button>
@@ -22,11 +43,17 @@ export default function Sidebar() {
</div>
<div className="news-widget-categories">
<ul>
<li><Link href="/news-details"><i className="fa-solid fa-chevrons-right"></i> Permanent Residency (PR)</Link><span>(04)</span></li>
<li><Link href="/news-details"><i className="fa-solid fa-chevrons-right"></i> Immigration Policy Updates</Link><span>(09)</span></li>
<li><Link href="/news-details"><i className="fa-solid fa-chevrons-right"></i> Scholarships & Grants</Link><span>(00)</span></li>
<li><Link href="/news-details"><i className="fa-solid fa-chevrons-right"></i> Citizenship & Naturalization</Link><span>(04)</span></li>
<li><Link href="/news-details"><i className="fa-solid fa-chevrons-right"></i> Visa Interview Preparation</Link><span>(01)</span></li>
{categories.map((category) => {
const postCount = category.postCount || 0;
return (
<li key={category.slug}>
<Link href={`/blog/category/${category.slug}`}>
<i className="fa-solid fa-chevrons-right"></i> {category.name}
</Link>
<span>({String(postCount).padStart(2, "0")})</span>
</li>
);
})}
</ul>
</div>
</div>
@@ -36,45 +63,27 @@ export default function Sidebar() {
<h3>Recent Post</h3>
</div>
<div className="recent-post-area">
<div className="recent-items">
<div className="recent-thumb">
<img src="/assets/img/inner-page/news-details/post-1.jpg" alt="img" />
{recentPosts.map((post) => (
<div key={post.slug} className="recent-items">
<div className="recent-thumb">
<img
src={post.thumbnail || "/assets/img/inner-page/news-details/details-1.jpg"}
alt={post.title}
width={88}
height={80}
style={{ objectFit: 'cover' }}
/>
</div>
<div className="recent-content">
<h6>
<Link href={`/blog/${post.slug}`}>{post.title}</Link>
</h6>
<ul>
<li>{post.publishedAt}</li>
</ul>
</div>
</div>
<div className="recent-content">
<h6>
<Link href="/news-details">Top Countries for Higher Education in 2025</Link>
</h6>
<ul>
<li>March 26, 2025</li>
</ul>
</div>
</div>
<div className="recent-items">
<div className="recent-thumb">
<img src="/assets/img/inner-page/news-details/post-2.jpg" alt="img" />
</div>
<div className="recent-content">
<h6>
<Link href="/news-details">The Benefits of Hiring a Visa Consultant</Link>
</h6>
<ul>
<li>March 26, 2025</li>
</ul>
</div>
</div>
<div className="recent-items">
<div className="recent-thumb">
<img src="/assets/img/inner-page/news-details/post-3.jpg" alt="img" />
</div>
<div className="recent-content">
<h6>
<Link href="/news-details">How to Prepare for Your Immigration Interview</Link>
</h6>
<ul>
<li>March 26, 2025</li>
</ul>
</div>
</div>
))}
</div>
</div>
{/* Tag Cloud */}
@@ -84,12 +93,11 @@ export default function Sidebar() {
</div>
<div className="news-widget-categories">
<div className="tagcloud">
<Link href="/news-details">WorkVisa</Link>
<Link href="/news-details">FamilyVisa</Link>
<Link href="/news-details">StudentVisa</Link>
<Link href="/news-details">VisaUpdates</Link>
<Link href="/news-details">TravelVisa</Link>
<Link href="/news-details">StudyAbroad</Link>
{tags.map((tag) => (
<Link key={tag.slug} href={`/blog/tag/${tag.slug}`}>
{tag.name}
</Link>
))}
</div>
</div>
</div>