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

'use client';
import Link from "next/link";
import { useEffect } from 'react';
import { categories } from "@/data/categories";
import ArticleItem from "@/components/shared/ArticleItem";

export default function ArticleCategory({ slug }: any) {
    useEffect(() => {
        document.body.style.background = '#F5F8FF';
    }, []);

    console.log('slug: ', 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]"> 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]">
                    {categoryList.map((item:any) => (
                        <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">
                    <ArticleItem />
                </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>
        </>

    )
}