upload 29/12
This commit is contained in:
313
src/components/article/Category/index.tsx
Normal file
313
src/components/article/Category/index.tsx
Normal file
@@ -0,0 +1,313 @@
|
||||
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>
|
||||
</>
|
||||
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user