313 lines
14 KiB
TypeScript
313 lines
14 KiB
TypeScript
|
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>
|
||
|
|
</>
|
||
|
|
|
||
|
|
)
|
||
|
|
}
|