export default function ArticleCategory({ slug }: { slug: string }) {
    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]">
            <a href="" className="active">
                {" "}
                MÁY KHỎE - ĐẸP{" "}
            </a>
            <a href=""> TIN CÔNG NGHỆ </a>
            <a href=""> REVIEW SẢN PHẨM </a>
            <a href=""> BENCHMARKS </a>
            <a href=""> THỦ THUẬT </a>
            <a href=""> KHUYẾN MÃI </a>
            <a href=""> WIKI </a>
            <a href=""> tin game </a>
            </div>
            {/* Tin tức */}
            <div className="article-holder grid lg:grid-cols-3 grid-cols-2 gap-4 lg:gap-6 my-5">
            <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 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>
            {/* 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>
        </>

    )
}