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

update 27/01

Browse Source
This commit is contained in:
Dao Duc
2026-01-27 17:02:26 +07:00
parent ddb60bd5f9
commit f1f925bab1
21 changed files with 1716 additions and 12373 deletions
Download Patch File Download Diff File Expand all files Collapse all files

83
src/components/home/Article/index.tsx
View File

@@ -1,52 +1,55 @@
import { articleList } from "@/data/articles";
import ArticleItem from "@/components/shared/ArticleItem";
import Link from "next/link";
export default function Article() {
// id: 5 - Tin tức Công nghệ
const techNews = articleList
.find(article => article.id === 5)
?.list.slice(0, 5) || [];
// id: 19 - Chuyên trang Khuyến mãi
const promoNews = articleList
.find(article => article.id === 19)
?.list.slice(0, 5) || [];
return(
( techNews.length > 0 || promoNews.length > 0) && (
<div className="home-article-container bg-white rounded-[24px] p-6 my-8">
<div className="mb-8 promotion-news-group">
<div className="flex items-center justify-between flex-wrap mb-4 leading-9 gap-4 text-16 font-600">
<h2 className="text-[28px] m-0 text-[#004BA4] leading-9"> Chuyên trang Khuyến mãi </h2>
<a href="/tin-khuyen-mai" className="text-[#0678DB]"> Xem tất cả <i className="bx bx-chevron-right align-middle ml-[-2px] mt-[-1px] text-18"></i> </a>
</div>
<div className="grid grid-cols-4 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]'></i>
<time> 23/4/2024 </time>
<i className="w-[1.5px] h-[12px] bg-[#A0A5AC]"></i>
<span> Mai Văn Học </span>
</div>
</div>
{techNews &&
<div className="mb-8 promotion-news-group">
<div className="flex items-center justify-between flex-wrap mb-4 leading-9 gap-4 text-16 font-600">
<h2 className="text-[28px] m-0 text-[#004BA4] leading-9"> Chuyên trang Khuyến mãi </h2>
<Link href="/tin-khuyen-mai" className="text-[#0678DB]"> Xem tất cả <i className="bx bx-chevron-right align-middle ml-[-2px] mt-[-1px] text-18"></i> </Link>
</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"></i><time>23/4/2024</time><i className="w-[1.5px] h-[12px] bg-[#A0A5AC] mx-1"></i><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]"></i><time>23/4/2024</time><i className="w-[1.5px] h-[12px] bg-[#A0A5AC]"></i><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]"></i><time>23/4/2024</time><i className="w-[1.5px] h-[12px] bg-[#A0A5AC]"></i><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]"></i><time>23/4/2024</time><i className="w-[1.5px] h-[12px] bg-[#A0A5AC]"></i><span>Mai Văn Học</span></div></div></div>
<div className="grid grid-cols-4 gap-6">
{
techNews.map( (item:any) => (
<ArticleItem key={item.id} item={item} />
))
}
</div>
</div>
}
</div>
{promoNews &&
<div>
<div className="flex items-center justify-between flex-wrap mb-4 leading-9 gap-4 text-16 font-600">
<h2 className="text-[28px] m-0 text-[#004BA4] leading-9"> Tin tức Công nghệ </h2>
<Link href="/tin-cong-nghe" className="text-[#0678DB]"> Xem tất cả <i className="bx bx-chevron-right align-middle ml-[-2px] mt-[-1px] text-18"></i> </Link>
</div>
<div>
<div className="flex items-center justify-between flex-wrap mb-4 leading-9 gap-4 text-16 font-600">
<h2 className="text-[28px] m-0 text-[#004BA4] leading-9"> Tin tức Công nghệ </h2>
<a href="/tin-cong-nghe" className="text-[#0678DB]"> Xem tất cả <i className="bx bx-chevron-right align-middle ml-[-2px] mt-[-1px] text-18"></i> </a>
<div className="grid grid-cols-4 gap-6">
{
promoNews.map( (item:any) => (
<ArticleItem key={item.id} item={item} />
))
}
</div>
</div>
<div className="grid grid-cols-4 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"></i><time>23/4/2024</time><i className="w-[1.5px] h-[12px] bg-[#A0A5AC] mx-1"></i><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]"></i><time>23/4/2024</time><i className="w-[1.5px] h-[12px] bg-[#A0A5AC]"></i><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]"></i><time>23/4/2024</time><i className="w-[1.5px] h-[12px] bg-[#A0A5AC]"></i><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]"></i><time>23/4/2024</time><i className="w-[1.5px] h-[12px] bg-[#A0A5AC]"></i><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]"></i><time>23/4/2024</time><i className="w-[1.5px] h-[12px] bg-[#A0A5AC]"></i><span>Mai Văn Học</span></div></div></div>
</div>
</div>
}
</div>
)
)
}

3
src/components/home/Deal/index.tsx
View File

@@ -3,6 +3,7 @@ import { Swiper, SwiperSlide } from 'swiper/react';
import { Navigation, Pagination, Autoplay } from 'swiper/modules';
import { dealList } from "@/data/deals"
import DealItem from "@/components/shared/DealItem"
import Link from 'next/link';
export default function Collection() {
@@ -24,7 +25,7 @@ export default function Collection() {
</div>
</div>
<a href='/deal' className="text-16 font-600"> Xem tất cả <i className="bx bx-chevron-right align-middle ml-[-2px] mt-[-1px]"></i> </a>
<Link href='/deal' className="text-16 font-600"> Xem tất cả <i className="bx bx-chevron-right align-middle ml-[-2px] mt-[-1px]"></i> </Link>
</div>
<div className="group relative z-[1] bg-white rounded-[12px] relative min-h-[450px] px-4 pt-6 pb-8">

7
src/components/home/Product/index.tsx
View File

@@ -5,6 +5,7 @@ import { categories } from "@/data/categories"
import { productList } from '@/data/products';
import CategoryIcon from "./CategoryIcon"
import ProductItem from "@/components/shared/ProductItem"
import Link from 'next/link';
export default function ProductCategories() {
@@ -34,12 +35,12 @@ export default function ProductCategories() {
item.children
.slice(0, 4)
.map((child: any) =>
<a href={child.url} key={child.id}
<Link href={child.url} key={child.id}
className="px-2 rounded-[30px] bg-[#EAF1FF]"
> {child.title} </a>
> {child.title} </Link>
)
}
<a href={item.url}> Xem tất cả <i className="bx bx-chevron-right text-20 align-middle"></i> </a>
<Link href={item.url}> Xem tất cả <i className="bx bx-chevron-right text-20 align-middle"></i> </Link>
</div>
</div>

5
src/components/home/featured-category/index.tsx
View File

@@ -1,3 +1,4 @@
import Link from "next/link";
import { categories } from "@/data/categories";
export default function FeaturedProductCategories() {
@@ -32,7 +33,7 @@ export default function FeaturedProductCategories() {
<div className="grid grid-cols-10 gap-6">
{featuredCategories
.map( (item:any) =>
<a href={item.url} className="item" key={item.id}>
<Link href={item.url} className="item" key={item.id}>
<i className="image lazy"
style={{ backgroundImage: `url(${item.thumnail ? item.thumnail : '/images/avatar-admin.png'})` }}
></i>
@@ -40,7 +41,7 @@ export default function FeaturedProductCategories() {
<span className="block">
{item.title}
</span>
</a>
</Link>
)
}
</div>

3
src/components/product/Category/Filter/index.tsx
View File

@@ -1,4 +1,5 @@
export default function ProductFilter() {
export default function ProductFilter({data}: any) {
console.log( data)
return (
<>
<p className="uppercase font-500 text-center border text-[#0678DB] leading-10 border-[#114CDD] rounded-[8px] mb-6">

17
src/components/product/Category/Paging/index.tsx
View File

@@ -1,17 +0,0 @@
export default function Paging() {
return (
<div className="text-center mt-12">
<button
type="button"
className="mb-3 bg-btn text-white rounded-[30px] h-10 font-500 text-16 table max-w-[240px] w-full m-auto mb-3"
aria-label="Xem thêm"
>
TẢI THÊM
</button>
<p className="text-14 leading-[18px] m-0">
{" "}
Hiển thị 1 - 24 trên tổng số 124 sản phẩm{" "}
</p>
</div>
)
}

5
src/components/product/Category/Static/index.tsx
View File

File diff suppressed because one or more lines are too long

19
src/components/product/Category/index.tsx
View File

@@ -1,22 +1,23 @@
import { productCategory } from "@/data/productCategory";
import ProductFilter from "./filter";
import Static from "./static";
import FAQ from "./faq";
import Banner from "./banner";
import SortByCollection from "./sort";
import ProductList from "./productList";
import Paging from "./paging";
export default function ProductCategory({ slug }: { slug: string }) {
export default function ProductCategory({ slug }: any) {
const { name,id, static_html } = productCategory.current_category
return(
<div className="product-page container">
<h1 className="text-[#004BA4] text-[32px] leading-10 mb-4 font-600">
PC THIẾT KẾ ĐỒ HỌA 3D
{name}
</h1>
<div className="product-page-content flex flex-wrap items-start gap-4 mb-5">
<div className="col-left-group w-[264px] rounded-[16px] bg-white p-4 pb-6">
<ProductFilter />
<ProductFilter data={slug} />
</div>
<div className="col-right-group w-[968px]">
@@ -25,12 +26,12 @@ export default function ProductCategory({ slug }: { slug: string }) {
<SortByCollection />
<ProductList />
<Paging />
<ProductList id={id}/>
</div>
<Static />
{static_html &&
<Static data={static_html} />
}
</div>
</div>

167
src/components/product/Category/productList/index.tsx
View File

File diff suppressed because one or more lines are too long

54
src/components/shared/ArticleItem.tsx Normal file
View File

@@ -0,0 +1,54 @@
import Link from "next/link";
import { formatArticleTime } from "@/lib/utils";
export default function ArticleItem({ item }: any) {
const url = item.external_url ? item.external_url : item.url;
const time = item.article_time ? item.article_time : item.lastUpdate;
return (
<>
<div className="art-item" data-id={item.id}>
<Link href={url} className="art-img"
{...(item.external_url ? {
target: "_blank",
rel: "noopener noreferrer"
} : {})}
>
<img src={item.image.original}
alt={item.title}
width={100}
height={100} />
</Link>
<div className="art-text">
<Link href={url} className="art-title"
{...(item.external_url ? {
target: "_blank",
rel: "noopener noreferrer"
} : {})}
>
<h3> {item.title} </h3>
</Link>
<div className="art-summary">
{item.summary}
</div>
<div className="art-time">
<i className='bx bx-calendar-alt text-16 text-[#A0A5AC]'></i>
<time>
{ formatArticleTime(time) }
</time>
{ item.create_by_name && (
<>
<i className="w-[1.5px] h-[12px] bg-[#A0A5AC]"></i>
<span> {item.create_by_name} </span>
</>
)}
</div>
</div>
</div>
</>
)
}

16
src/components/shared/ProductItem.tsx
View File

@@ -3,13 +3,21 @@ import Link from "next/link";
import { formatPrice } from "@/lib/utils";
import { useProductItem } from "@/hooks/useProductItem"
import { useCart } from '@/hooks/useCart';
import { useEffect, useState } from "react";
export default function ProductItem({item}:any){
const [mounted, setMounted] = useState(false);
useEffect(() => {
setMounted(true);
}, []);
const product = useProductItem(item);
if (!product) return null;
const { addToCart, isInCart } = useCart();
if (!mounted || !product) return null;
const {
productId,
productUrl,
@@ -123,7 +131,8 @@ export default function ProductItem({item}:any){
</p>
<div className="tooltip-spec">
<div dangerouslySetInnerHTML={{ __html: displaySummary }}/>
<div suppressHydrationWarning
dangerouslySetInnerHTML={{ __html: displaySummary }}/>
</div>
</div>
}
@@ -136,7 +145,8 @@ export default function ProductItem({item}:any){
</p>
<div className="tooltip-offer rounded-[8px] bg-[#FEF2F2] px-2 py-4">
<div dangerouslySetInnerHTML={{ __html: displayOffer }}/>
<div suppressHydrationWarning
dangerouslySetInnerHTML={{ __html: displayOffer }}/>
</div>
</div>
}