07/02/2026

src/app/[slug]/metadataBySlug.tsx

@@ -1,7 +1,7 @@
 import type { Metadata } from "next";
 
 export function metadataBySlug(result: any): Metadata {
-    console.log('metadataBySlug: ', result)
+    
     switch (result.type) {
         case "product_category":
             return {

src/app/[slug]/page.tsx

@@ -22,7 +22,6 @@ export async function generateMetadata({
     const { slug } = await params;
     const result = await getCachedSlugData(slug);
     
-    
     if (!result) {
         return { title: "Local PC" };
     }

src/app/[slug]/renderBySlug.tsx

@@ -1,4 +1,3 @@
-// src/app/[slug]/renderBySlug.tsx
 import { notFound } from "next/navigation";
 
 import ProductCategory from "@/components/product/category";
@@ -22,7 +21,7 @@ export function renderBySlug(result: any, slug: string) {
             return <ArticleCategory slug={result.data} />;
 
         case "article_detail":
-            return <ArticleDetail slug={result.data.slug} />;
+            return <ArticleDetail slug={result.data} />;
 
         default:
             notFound();

src/components/article/Category/article/index.tsx

@@ -0,0 +1,47 @@
+import Link from "next/link";
+import { categories } from "@/data/categories";
+import { articleList } from "@/data/articles/index";
+import { useShowMore } from "@/hooks/useShowMore"
+import ShowMoreButton from "@/components/shared/ButtonShowMore"
+import ArticleItem from "@/components/shared/ArticleItem";
+
+export default function ArticleList({ slug }: any) {
+
+    const { article } = categories.article.all_category;
+    const categoryList = slug.children?.length > 0 ? slug.children : article
+
+    const articleData = articleList.find((item: any) => item.id === slug.id)?.list || [];
+    const { displayData, hasMore, loadMore } = useShowMore(articleData, 12);
+
+    return (
+        <>
+            <div className="article-categories-group bg-[#F5F8FF] flex justify-between relative overflow-auto whitespace-nowrap uppercase font-500 leading-[18px] text-[#828282] gap-5 lg:gap-1 no-scroll border-b border-[#C5CBD8]">
+                {categoryList.map((item: any) => (
+                    <Link className={`${item.id === slug.id ? 'active' : ''}`}
+                        href={item.url}
+                        key={item.id}
+                    > {item.title} </Link>
+                ))}
+            </div>
+
+            {displayData.length == 0
+                ? (<p className="text-center font-600 uppercase mt-10 text-20"> Tin tức đang cập nhật ... ! </p>)
+                : (
+                    <>
+                        <div className="article-holder grid lg:grid-cols-3 grid-cols-2 gap-4 lg:gap-6 my-5">
+                            {displayData.map((item: any) =>
+                                <ArticleItem
+                                    key={item.id}
+                                    item={item}
+                                />
+                            )}
+                        </div>
+
+                        {hasMore &&
+                            <ShowMoreButton onClick={loadMore} />
+                        }
+                    </>
+                )}
+        </>
+    )
+}

src/components/article/Category/index.tsx

@@ -1,167 +1,29 @@
 'use client';
-import Link from "next/link";
 import { useEffect } from 'react';
-import { categories } from "@/data/categories";
+import ArticleList from "./article"
-import ArticleItem from "@/components/shared/ArticleItem";
+import VideoList from "./video";
 
 export default function ArticleCategory({ slug }: any) {
     useEffect(() => {
         document.body.style.background = '#F5F8FF';
     }, []);
 
-    console.log('slug: ', slug)
+    const { type } = slug;
-    const { article } = categories.article.all_category
 
-
-    const categoryList = slug.children.length > 0
-                            ? slug.children
-                            : article
-    console.log('categoryList: ', categoryList)
     return (
-        <>
+        <>  <h1 className="absolute top-[-999px] z-[-1]"> {slug.title} </h1>
-            <h1 className="absolute top-[-999px] z-[-1]"> Danh mục tin </h1>
+
             <div className="article-page container !mt-8 mt-6">
-                {/* <style>body{background: #F5F8FF}</style> */}
+                {
-                <div className="article-categories-group bg-[#F5F8FF] flex justify-between relative overflow-auto whitespace-nowrap uppercase font-500 leading-[18px] text-[#828282] gap-5 lg:gap-1 no-scroll border-b border-[#C5CBD8]">
+                    type === 'article' 
-                    {categoryList.map((item:any) => (
+                    && <ArticleList slug={slug} />
-                        <Link className={`${item.id === slug.id ? 'active' : '' }`}
+                }
-                            href={item.url}
-                            key={item.id}
-                        >
-                            {item.title}
-                        </Link>
-                    ))}
-                </div>
 
-                {/* Tin tức */}
+                {
-                <div className="article-holder grid lg:grid-cols-3 grid-cols-2 gap-4 lg:gap-6 my-5">
+                    type === 'video' 
+                    && <VideoList slug={slug} />
+                }
 
-                </div>
-                {/* Video */}
-                <div className="article-holder article-video-holder grid lg:grid-cols-3 grid-cols-2 gap-4 lg:gap-6 my-5">
-                    <a
-                        href="https://www.youtube.com/watch?v=kGSYaCyNPvg"
-                        data-fancybox=""
-                        className="video-item"
-                    >
-                        <span className="item-img">
-                            <img
-                                src="https://hoanghapccdn.com/media/news/1241_pc_do_hoa_13900k_4070.jpg"
-                                alt="PC Đồ Họa Siêu Khỏe - Đẹp 13900K + VGA RTX 4070"
-                                width={120}
-                                height={66}
-                            />
-                            <i className="bx bxs-play-circle" />
-                        </span>
-                        <span className="item-title">
-                            {" "}
-                            PC Đồ Họa Siêu Khỏe - Đẹp 13900K + VGA RTX 4070{" "}
-                        </span>
-                    </a>
-                    <a
-                        href="https://www.youtube.com/watch?v=kGSYaCyNPvg"
-                        data-fancybox=""
-                        className="video-item"
-                    >
-                        <span className="item-img">
-                            <img
-                                src="https://hoanghapccdn.com/media/news/1241_pc_do_hoa_13900k_4070.jpg"
-                                alt="PC Đồ Họa Siêu Khỏe - Đẹp 13900K + VGA RTX 4070"
-                                width={120}
-                                height={66}
-                            />
-                            <i className="bx bxs-play-circle" />{" "}
-                        </span>
-                        <span className="item-title">
-                            PC Đồ Họa Siêu Khỏe - Đẹp 13900K + VGA RTX 4070
-                        </span>
-                    </a>
-                    <a
-                        href="https://www.youtube.com/watch?v=kGSYaCyNPvg"
-                        data-fancybox=""
-                        className="video-item"
-                    >
-                        <span className="item-img">
-                            <img
-                                src="https://hoanghapccdn.com/media/news/1241_pc_do_hoa_13900k_4070.jpg"
-                                alt="PC Đồ Họa Siêu Khỏe - Đẹp 13900K + VGA RTX 4070"
-                                width={120}
-                                height={66}
-                            />
-                            <i className="bx bxs-play-circle" />{" "}
-                        </span>
-                        <span className="item-title">
-                            PC Đồ Họa Siêu Khỏe - Đẹp 13900K + VGA RTX 4070
-                        </span>
-                    </a>
-                    <a
-                        href="https://www.youtube.com/watch?v=kGSYaCyNPvg"
-                        data-fancybox=""
-                        className="video-item"
-                    >
-                        <span className="item-img">
-                            <img
-                                src="https://hoanghapccdn.com/media/news/1241_pc_do_hoa_13900k_4070.jpg"
-                                alt="PC Đồ Họa Siêu Khỏe - Đẹp 13900K + VGA RTX 4070"
-                                width={120}
-                                height={66}
-                            />
-                            <i className="bx bxs-play-circle" />{" "}
-                        </span>
-                        <span className="item-title">
-                            PC Đồ Họa Siêu Khỏe - Đẹp 13900K + VGA RTX 4070
-                        </span>
-                    </a>
-                    <a
-                        href="https://www.youtube.com/watch?v=kGSYaCyNPvg"
-                        data-fancybox=""
-                        className="video-item"
-                    >
-                        <span className="item-img">
-                            <img
-                                src="https://hoanghapccdn.com/media/news/1241_pc_do_hoa_13900k_4070.jpg"
-                                alt="PC Đồ Họa Siêu Khỏe - Đẹp 13900K + VGA RTX 4070"
-                                width={120}
-                                height={66}
-                            />
-                            <i className="bx bxs-play-circle" />{" "}
-                        </span>
-                        <span className="item-title">
-                            PC Đồ Họa Siêu Khỏe - Đẹp 13900K + VGA RTX 4070
-                        </span>
-                    </a>
-                </div>
-                {/* Paging */}
-                <div className="my-10 flex flex-wrap items-center justify-center gap-4 leading-10 text-center text-16 font-500">
-                    <a
-                        href=""
-                        className="w-10 rounded-full border border-[#DDDDDD] hover:bg-[#004BA4] hover:text-white hover:border-transparent bg-[#004BA4] text-white border-transparent"
-                    >
-                        {" "}
-                        1{" "}
-                    </a>
-                    <a
-                        href=""
-                        className="w-10 rounded-full border border-[#DDDDDD] hover:bg-[#004BA4] hover:text-white hover:border-transparent"
-                    >
-                        {" "}
-                        2{" "}
-                    </a>{" "}
-                    <a
-                        href=""
-                        className="w-10 rounded-full border border-[#DDDDDD] hover:bg-[#004BA4] hover:text-white hover:border-transparent"
-                    >
-                        {" "}
-                        3{" "}
-                    </a>{" "}
-                    <a
-                        href=""
-                        className="w-10 rounded-full border border-[#DDDDDD] hover:bg-[#004BA4] hover:text-white hover:border-transparent"
-                    >
-                        {" "}
-                        4{" "}
-                    </a>
-                </div>
             </div>
         </>
 

src/components/article/Category/video/index.tsx

@@ -0,0 +1,58 @@
+'use client';
+import { Fancybox } from "@fancyapps/ui";
+import { useEffect } from "react";
+import { useShowMore } from "@/hooks/useShowMore"
+import { VideoData } from "@/data/articles/Video";
+import ShowMoreButton from "@/components/shared/ButtonShowMore"
+
+export default function VideoList({ slug }: any) {
+
+    useEffect(() => {
+        Fancybox.bind('[data-fancybox]', {});
+        return () => Fancybox.destroy();
+    }, []);
+      
+    const { displayData, hasMore, loadMore } = useShowMore(VideoData.list, 12);
+ 
+    return (
+        <>
+            {displayData.length == 0
+                ? (<p className="text-center font-600 uppercase mt-10 text-20"> Tin tức đang cập nhật ... ! </p>)
+                : (
+                    <>
+                        <div className="article-holder article-video-holder grid lg:grid-cols-3 grid-cols-2 gap-4 lg:gap-6 my-5">
+                            {
+                                displayData.map((item: any) =>
+                                    <a
+                                        key={item.id}
+                                        href={item.video_code}
+                                        data-fancybox=""
+                                        className="video-item"
+                                        rel="nofollow"
+                                    >
+                                        <span className="item-img">
+                                            <img
+                                                src={item.image.original}
+                                                alt={item.title}
+                                                width={120}
+                                                height={66}
+                                            />
+                                            <i className="bx bxs-play-circle" />
+                                        </span>
+
+                                        <span className="item-title">
+                                            {item.title}
+                                        </span>
+                                    </a>
+                                )
+                            }
+                        </div>
+                        
+                        { hasMore && 
+                            <ShowMoreButton onClick={loadMore} />
+                        }
+                    </>
+                )}
+        </>
+    )
+}

src/components/article/Home/Video.tsx

@@ -2,7 +2,7 @@ import Link from "next/link";
 import { useState, useEffect, useMemo } from "react";
 import { VideoData } from "@/data/articles/Video";
 
-export default function Video() {
+export default function Video( {item} : any ) {
     const { total, list } = VideoData;
     const [active, setActive] = useState<number | null>(null);
     const [url, setUrl] = useState<string>("");
@@ -31,7 +31,6 @@ export default function Video() {
         return null;
     }, [url]);
 
-
     return (list.length > 0 &&
         <div className="article-video-container lg:flex flex-wrap gap-4 mt-16">
             <div className="lg:w-[732px] video-holder">
@@ -48,14 +47,13 @@ export default function Video() {
                     <i className="w-[18px] h-[18px] lg:w-6 lg:h-6 lazy bg-no-repeat bg-center bg-[length:100%_100%]"
                         style={{ backgroundImage: 'url(/images/icon-playlist.png)' }}
                     />
-                    <Link href="/video"> Trending video </Link>
+                    <Link href={item[0].url}> Trending video </Link>
                 </p>
 
                 <div className="h-[385px] p-4 pr-1 relative">
                     <div className="h-full overflow-auto flex flex-col gap-4">
                         {list.map((item: any) =>
-                            <button
+                            <button type="button"
-                                type="button"
                                 key={item.id}
                                 onClick={() => {
                                     setActive(item.id);

src/components/article/Home/index.tsx

@@ -11,6 +11,10 @@ import Video from "./Video"
 import Tiktok from "./Tiktok";
 
 export default function ArticleHome() {
+    const {
+        article,
+        video 
+    } = categories.article.all_category;
 
     const top_article_list = articleList
                             .flatMap(item => item.list)
@@ -50,7 +54,7 @@ export default function ArticleHome() {
                 </div>
 
                 <div>
-                    {categories.article.all_category.article.map((item: any) =>{                        
+                    {article.map((item: any) =>{                        
                         const data = articleList.find(i => i.id === item.id)?.list || [];
 
                         return <ArticleCategories
@@ -62,7 +66,9 @@ export default function ArticleHome() {
                 </div>
 
                 <div className="container">
-                    <Video />
+                    {video.length > 0 &&
+                        <Video item={video} />
+                    }
 
                     <Tiktok />
                 </div>

src/components/article/detail/index.tsx

@@ -1,218 +1,110 @@
-export default function ArticleDetail({ slug }: { slug: string }) {
+'use client';
-    return(
+import Link from "next/link";
+import parse from "html-react-parser";
+import { useEffect } from 'react';
+import { formatArticleTime } from "@/lib/utils";
+import ArticleItem from "@/components/shared/ArticleItem";
+
+export default function ArticleDetail({ slug }: any) {
+    useEffect(() => {
+        document.body.style.background = '#ffffff';
+    }, []);
+
+    const time = slug.article_time || slug.lastUpdate;
+
+    return (
         <>
-  <link
+            <link href="https://cdn.boxicons.com/fonts/brands/boxicons-brands.min.css" rel="stylesheet" />
-    href="https://cdn.boxicons.com/fonts/brands/boxicons-brands.min.css"
+
-    rel="stylesheet"
+            <div className="container !mt-8 mt-6">
-  />
+                <div className="article-detail-page max-w-[824px] m-auto my-8">
-  <div className="container !mt-8 mt-6">
+                    <Link
-    {/* <style> body{background: #fff;} </style> */}
+                        href=""
-    <div className="article-detail-page max-w-[824px] m-auto my-8">
+                        target="_blank"
-      <a
+                        rel="nofollow"
-        href=""
+                        className="table border border-[#76BBFF80] rounded-[30px] bg-[#EAF1FF] px-5 leading-8 mb-3"
-        target="_blank"
+                    >
-        rel="nofollow"
+                        <span className="text-[#004BA4]"> Hoàng Hà PC trên </span>
-        className="table border border-[#76BBFF80] rounded-[30px] bg-[#EAF1FF] px-5 leading-8 mb-3"
+                        <span className="text-[#4285F4]">G</span>
-      >
+                        <span className="text-[#EA4335]">o</span>
-        <span className="text-[#004BA4]"> Hoàng Hà PC trên </span>
+                        <span className="text-[#FBBC05]">o</span>
-        <span className="text-[#4285F4]">G</span>
+                        <span className="text-[#4285F4]">g</span>
-        <span className="text-[#EA4335]">o</span>
+                        <span className="text-[#34A853]">l</span>
-        <span className="text-[#FBBC05]">o</span>
+                        <span className="text-[#EA4335]">e</span>
-        <span className="text-[#4285F4]">g</span>
+                        <span className="text-[#5F6368]"> News </span>
-        <span className="text-[#34A853]">l</span>
+                    </Link>
-        <span className="text-[#EA4335]">e</span>
+
-        <span className="text-[#5F6368]"> News </span>
+                    <h1 className="font-600 text-[#004BA4] text-20 leading-6 lg:leading-10 lg:text-[32px] mb-3">
-      </a>
+                        {slug.title}
-      <h1 className="font-600 text-[#004BA4] text-20 leading-6 lg:leading-10 lg:text-[32px] mb-3">
+                    </h1>
-        {" "}
+
-        {"{"}
+                    <div className="lg:text-[16px] lg:leading-[22px] flex items-center gap-1 mb-6 lg:mb-8">
-        {"{"} page.article_detail.title {"}"}
+                        <i className="icons icon-time mr-1" />
-        {"}"}{" "}
+                        <span> {formatArticleTime(time)} </span>
-      </h1>
+                        <span>|</span>
-      <div className="lg:text-[16px] lg:leading-[22px] flex items-center gap-1 mb-6 lg:mb-8">
+                        <a href="/author/mai-van-hoc"> {slug.author} </a>
-        <i className="icons icon-time mr-1" />
+                    </div>
-        <span> Thứ sáu 25/07/2025 </span>
+
-        <span>|</span>
+                    <div className="article-content lg:leading-5 lg:text-[16px] text-justify">
-        <a href=""> Mai Văn Học </a>
+                        {parse(slug.content)}
-      </div>
+                    </div>
-      <div className="article-content lg:leading-6 lg:text-[18px]">
+
-        <p>
+                    <div className="flex items-center flex-wrap lg:gap-[30px] gap-5 mb-8">
-          Lorem ipsum dolor sit amet consectetur, adipisicing elit. Aspernatur
+                        <p className="m-0">SHARE</p>
-          quaerat vero itaque voluptatum? Repellendus laudantium est doloribus
+                        <div className="flex flex-wrap gap-2">
-          saepe accusantium, illo numquam ullam deserunt expedita repudiandae
+                            <Link
-          ipsam libero, temporibus soluta eius.
+                                href=""
-        </p>
+                                rel="nofollow"
-      </div>
+                                target="_blank"
-      <div className="flex items-center flex-wrap lg:gap-[30px] gap-5 mb-8">
+                                className="bx bx-share w-[42px] h-[42px] !flex items-center justify-center rounded-full bg-[#0678DB] text-white text-center text-[21px] transition-all duration-300 relative bottom-0 hover:bottom-[5px]"
-        <p className="m-0">SHARE</p>
+                            ></Link>
-        <div className="flex flex-wrap gap-2">
+                            <Link
-          <a
+                                href=""
-            href=""
+                                rel="nofollow"
-            rel="nofollow"
+                                target="_blank"
-            className="bx bx-share w-[42px] h-[42px] !flex items-center justify-center rounded-full bg-[#0678DB] text-white text-center text-[21px] transition-all duration-300 relative bottom-0 hover:bottom-[5px]"
+                                className="bxl bx-facebook w-[42px] h-[42px] !flex items-center justify-center rounded-full bg-[#0678DB] text-white text-center text-[21px] transition-all duration-300 relative bottom-0 hover:bottom-[5px]"
-          />
+                            ></Link>
-          <a
+                            <Link
-            href=""
+                                href=""
-            rel="nofollow"
+                                rel="nofollow"
-            className="bxl bx-facebook w-[42px] h-[42px] !flex items-center justify-center rounded-full bg-[#0678DB] text-white text-center text-[21px] transition-all duration-300 relative bottom-0 hover:bottom-[5px]"
+                                target="_blank"
-          />
+                                className="bxl bx-youtube w-[42px] h-[42px] !flex items-center justify-center rounded-full bg-[#0678DB] text-white text-center text-[21px] transition-all duration-300 relative bottom-0 hover:bottom-[5px]"
-          <a
+                            ></Link>
-            href=""
+                            <Link
-            rel="nofollow"
+                                href=""
-            className="bxl bx-youtube w-[42px] h-[42px] !flex items-center justify-center rounded-full bg-[#0678DB] text-white text-center text-[21px] transition-all duration-300 relative bottom-0 hover:bottom-[5px]"
+                                rel="nofollow"
-          />
+                                target="_blank"
-          <a
+                                className="bxl bx-instagram-alt w-[42px] h-[42px] !flex items-center justify-center rounded-full bg-[#0678DB] text-white text-center text-[21px] transition-all duration-300 relative bottom-0 hover:bottom-[5px]"
-            href=""
+                            ></Link>
-            rel="nofollow"
+                            <Link
-            className="bxl bx-instagram-alt w-[42px] h-[42px] !flex items-center justify-center rounded-full bg-[#0678DB] text-white text-center text-[21px] transition-all duration-300 relative bottom-0 hover:bottom-[5px]"
+                                href=""
-          />
+                                rel="nofollow"
-          <a
+                                target="_blank"
-            href=""
+                                className="bxl bx-tiktok w-[42px] h-[42px] !flex items-center justify-center rounded-full bg-[#0678DB] text-white text-center text-[21px] transition-all duration-300 relative bottom-0 hover:bottom-[5px]"
-            rel="nofollow"
+                            ></Link>
-            className="bxl bx-tiktok w-[42px] h-[42px] !flex items-center justify-center rounded-full bg-[#0678DB] text-white text-center text-[21px] transition-all duration-300 relative bottom-0 hover:bottom-[5px]"
+                        </div>
-          />
+                    </div>
-        </div>
+                </div>
-      </div>
+
-    </div>
+                {slug.related.article &&
-    <div className="mt-10 lg:mt-12">
+                    <div className="mt-10 lg:mt-12">
-      <p className="font-600 text-[32px] leading-10 mb-6 lg:text-[40px] lg:leading-12 lg:mb-8">
+                        <p className="font-600 text-[32px] leading-10 mb-6 lg:text-[40px] lg:leading-12 lg:mb-8">
-        {" "}
+                            Bài viết liên quan
-        Bài viết liên quan{" "}
+                        </p>
-      </p>
+
-      {/* Limit: 4 */}
+                        <div className="grid grid-cols-2 gap-4 lg:grid-cols-4 lg:gap-6">
-      <div className="grid grid-cols-2 gap-4 lg:grid-cols-4 lg:gap-6">
+                            {
-        <div className="art-item">
+                                slug.related.article.slice(0, 4).map((item: any) =>
-          <a href="" className="art-img">
+                                    <ArticleItem
-            <img
+                                        item={item}
-              src="https://hoanghapccdn.com/media/news/14_100__c___u_h__nh_m__y_t__nh_______h___a_theo_ng__n_s__ch.jpg"
+                                        key={item.id}
-              alt=""
+                                    />
-              width={1}
+                                )}
-              height={1}
+                        </div>
-            />
+                    </div>
-          </a>
+                }
-          <div className="art-text">
-            <a href="" className="art-title">
-              <h3>
-                Lorem, ipsum dolor sit amet consectetur adipisicing elit. Eum
-                quidem asperiores provident dicta veniam deleniti eaque
-                repudiandae cum esse, ducimus officiis quibusdam pariatur neque
-                voluptates voluptas. Quisquam qui minus dolorum?
-              </h3>
-            </a>
-            <div className="art-summary">
-              Lorem ipsum dolor sit, amet consectetur adipisicing elit. Velit,
-              obcaecati ducimus veritatis aliquid sunt accusamus unde nisi
-              nostrum fugit facere illo quos. Ad error suscipit, quidem optio
-              aut laudantium at!
             </div>
-            <div className="art-time">
+        </>
-              <i className="bx bx-calendar-alt text-16 text-[#A0A5AC]" />
-              <time>23/4/2024</time>
-              <i className="w-[1.5px] h-[12px] bg-[#A0A5AC]" />
-              <span>Mai Văn Học</span>
-            </div>
-          </div>
-        </div>
-        <div className="art-item">
-          <a href="" className="art-img">
-            <img
-              src="https://hoanghapccdn.com/media/news/14_100__c___u_h__nh_m__y_t__nh_______h___a_theo_ng__n_s__ch.jpg"
-              alt=""
-              width={1}
-              height={1}
-            />
-          </a>
-          <div className="art-text">
-            <a href="" className="art-title">
-              <h3>
-                Lorem, ipsum dolor sit amet consectetur adipisicing elit. Eum
-                quidem asperiores provident dicta veniam deleniti eaque
-                repudiandae cum esse, ducimus officiis quibusdam pariatur neque
-                voluptates voluptas. Quisquam qui minus dolorum?
-              </h3>
-            </a>
-            <div className="art-summary">
-              Lorem ipsum dolor sit, amet consectetur adipisicing elit. Velit,
-              obcaecati ducimus veritatis aliquid sunt accusamus unde nisi
-              nostrum fugit facere illo quos. Ad error suscipit, quidem optio
-              aut laudantium at!
-            </div>
-            <div className="art-time">
-              <i className="bx bx-calendar-alt text-16 text-[#A0A5AC]" />
-              <time>23/4/2024</time>
-              <i className="w-[1.5px] h-[12px] bg-[#A0A5AC]" />
-              <span>Mai Văn Học</span>
-            </div>
-          </div>
-        </div>
-        <div className="art-item">
-          <a href="" className="art-img">
-            <img
-              src="https://hoanghapccdn.com/media/news/14_100__c___u_h__nh_m__y_t__nh_______h___a_theo_ng__n_s__ch.jpg"
-              alt=""
-              width={1}
-              height={1}
-            />
-          </a>
-          <div className="art-text">
-            <a href="" className="art-title">
-              <h3>
-                Lorem, ipsum dolor sit amet consectetur adipisicing elit. Eum
-                quidem asperiores provident dicta veniam deleniti eaque
-                repudiandae cum esse, ducimus officiis quibusdam pariatur neque
-                voluptates voluptas. Quisquam qui minus dolorum?
-              </h3>
-            </a>
-            <div className="art-summary">
-              Lorem ipsum dolor sit, amet consectetur adipisicing elit. Velit,
-              obcaecati ducimus veritatis aliquid sunt accusamus unde nisi
-              nostrum fugit facere illo quos. Ad error suscipit, quidem optio
-              aut laudantium at!
-            </div>
-            <div className="art-time">
-              <i className="bx bx-calendar-alt text-16 text-[#A0A5AC]" />
-              <time>23/4/2024</time>
-              <i className="w-[1.5px] h-[12px] bg-[#A0A5AC]" />
-              <span>Mai Văn Học</span>
-            </div>
-          </div>
-        </div>
-        <div className="art-item">
-          <a href="" className="art-img">
-            <img
-              src="https://hoanghapccdn.com/media/news/14_100__c___u_h__nh_m__y_t__nh_______h___a_theo_ng__n_s__ch.jpg"
-              alt=""
-              width={1}
-              height={1}
-            />
-          </a>
-          <div className="art-text">
-            <a href="" className="art-title">
-              <h3>
-                Lorem, ipsum dolor sit amet consectetur adipisicing elit. Eum
-                quidem asperiores provident dicta veniam deleniti eaque
-                repudiandae cum esse, ducimus officiis quibusdam pariatur neque
-                voluptates voluptas. Quisquam qui minus dolorum?
-              </h3>
-            </a>
-            <div className="art-summary">
-              Lorem ipsum dolor sit, amet consectetur adipisicing elit. Velit,
-              obcaecati ducimus veritatis aliquid sunt accusamus unde nisi
-              nostrum fugit facere illo quos. Ad error suscipit, quidem optio
-              aut laudantium at!
-            </div>
-            <div className="art-time">
-              <i className="bx bx-calendar-alt text-16 text-[#A0A5AC]" />
-              <time>23/4/2024</time>
-              <i className="w-[1.5px] h-[12px] bg-[#A0A5AC]" />
-              <span>Mai Văn Học</span>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</>
 
     )
 }

src/data/categories/index.tsx

@@ -240,7 +240,7 @@ export const categories = {
                     parentId: 0,
                     isParent: 0,
                     item_count: 6,
-                    type: "article",
+                    type: "video",
                     title: "Trending video",
                     url: "/trending-video",
                     summary: "",
@@ -255,7 +255,7 @@ export const categories = {
                         parentId: 0,
                         isParent: 0,
                         item_count: 1,
-                        type: "article",
+                        type: "job",
                         title: "Kinh doanh online",
                         url: "/kinh-doanh-online",
                         summary: "",
@@ -267,7 +267,7 @@ export const categories = {
                         parentId: 0,
                         isParent: 0,
                         item_count: 0,
-                        type: "article",
+                        type: "job",
                         title: "Truyền thông nội bộ",
                         url: "/truyen-thong-noi-bo",
                         summary: "",
@@ -279,7 +279,7 @@ export const categories = {
                         parentId: 0,
                         isParent: 0,
                         item_count: 3,
-                        type: "article",
+                        type: "job",
                         title: "Kỹ thuật máy tính",
                         url: "/ky-thuat-may-tinh",
                         summary: "",
@@ -291,7 +291,7 @@ export const categories = {
                         parentId: 0,
                         isParent: 0,
                         item_count: 2,
-                        type: "article",
+                        type: "job",
                         title: "Tài chính kế toán",
                         url: "/tai-chinh-ke-toan",
                         summary: "",
@@ -303,7 +303,7 @@ export const categories = {
                         parentId: 0,
                         isParent: 0,
                         item_count: 3,
-                        type: "article",
+                        type: "job",
                         title: "Marketing",
                         url: "/marketing",
                         summary: "",
@@ -315,7 +315,7 @@ export const categories = {
                         parentId: 0,
                         isParent: 0,
                         item_count: 1,
-                        type: "article",
+                        type: "job",
                         title: "Nhân sự",
                         url: "/nhan-su",
                         summary: "",

src/lib/slug/resolveArticlePage.ts

@@ -20,8 +20,10 @@ export function resolveArticlePage(slug: string): ArticleResult | null {
     }
 
     // CATEGORY
-    const cats = categories.article.all_category.article;
+    const { article, job, video } = categories.article.all_category;
-    for (const parent of cats) {
+    const allCategories = [...article, ...job, ...video];
+
+    for (const parent of allCategories) {
         if (parent.url === url) {
             return {
                 type: "article_category",
@@ -39,6 +41,7 @@ export function resolveArticlePage(slug: string): ArticleResult | null {
         }
     }
 
+
     // DETAIL
     const detail = articleList
                         .flatMap(article => article.list)