ducdt/hoanghapc_nextJs
Template
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

upload 29/12

Browse Source
This commit is contained in:
Dao Duc
2025-12-29 17:43:31 +07:00
parent 1be2e55959
commit 19b55a3d93
138 changed files with 18742 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

218
src/components/article/ArticleDetail/index.tsx Normal file
View File

@@ -0,0 +1,218 @@
export default function ArticleDetail({ slug }: { slug: string }) {
return(
<>
<link
href="https://cdn.boxicons.com/fonts/brands/boxicons-brands.min.css"
rel="stylesheet"
/>
<div className="container !mt-8 mt-6">
{/* <style> body{background: #fff;} </style> */}
<div className="article-detail-page max-w-[824px] m-auto my-8">
<a
href=""
target="_blank"
rel="nofollow"
className="table border border-[#76BBFF80] rounded-[30px] bg-[#EAF1FF] px-5 leading-8 mb-3"
>
<span className="text-[#004BA4]"> Hoàng Hà PC trên </span>
<span className="text-[#4285F4]">G</span>
<span className="text-[#EA4335]">o</span>
<span className="text-[#FBBC05]">o</span>
<span className="text-[#4285F4]">g</span>
<span className="text-[#34A853]">l</span>
<span className="text-[#EA4335]">e</span>
<span className="text-[#5F6368]"> News </span>
</a>
<h1 className="font-600 text-[#004BA4] text-20 leading-6 lg:leading-10 lg:text-[32px] mb-3">
{" "}
{"{"}
{"{"} page.article_detail.title {"}"}
{"}"}{" "}
</h1>
<div className="lg:text-[16px] lg:leading-[22px] flex items-center gap-1 mb-6 lg:mb-8">
<i className="icons icon-time mr-1" />
<span> Thứ sáu 25/07/2025 </span>
<span>|</span>
<a href=""> Mai Văn Học </a>
</div>
<div className="article-content lg:leading-6 lg:text-[18px]">
<p>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Aspernatur
quaerat vero itaque voluptatum? Repellendus laudantium est doloribus
saepe accusantium, illo numquam ullam deserunt expedita repudiandae
ipsam libero, temporibus soluta eius.
</p>
</div>
<div className="flex items-center flex-wrap lg:gap-[30px] gap-5 mb-8">
<p className="m-0">SHARE</p>
<div className="flex flex-wrap gap-2">
<a
href=""
rel="nofollow"
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]"
/>
<a
href=""
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]"
/>
<a
href=""
rel="nofollow"
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
href=""
rel="nofollow"
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]"
/>
<a
href=""
rel="nofollow"
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 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">
{" "}
Bài viết liên quan{" "}
</p>
{/* Limit: 4 */}
<div className="grid grid-cols-2 gap-4 lg:grid-cols-4 lg:gap-6">
<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>
</div>
</div>
</>
)
}

313
src/components/article/Category/index.tsx Normal file
View 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>
</>
)
}

1202
src/components/article/Home/index.tsx Normal file
View File

File diff suppressed because it is too large Load Diff