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

update 2/2/2026

Browse Source
This commit is contained in:
Dao Duc
2026-02-02 16:42:40 +07:00
parent 12509e3a7b
commit 6318621cc0
25 changed files with 1568 additions and 570 deletions
Download Patch File Download Diff File Expand all files Collapse all files

85
src/components/product/detail/index.tsx
View File

@@ -1,38 +1,34 @@
import { formatPrice } from "@/lib/utils";
import ProductImage from "./image";
import ProductImage from "./images";
import Static from "./static";
import ProductDescription from "./description"
import Comment from "./comment";
import Review from "./review";
import Comment from "./comments";
import Review from "./reviews";
import ProductSpec from "./specifications";
import Article from "./article";
import Article from "./articles";
import ProductPrice from "./price";
import ProductOffer from "./offer";
import Buttons from "./button";
import Buttons from "./buttons";
import ProductSummary from "./summary";
export default async function ProductDetail({ slug }: any) {
const {
productName,
productId,
review,
visit,
quantity,
productSummary,
productImage, imageCollection,
price, marketPrice, deal_list, price_off, sale_rules,
hasVAT, warranty,
specialOffer,
productDescription,
productSpec
} = slug
import { ReviewData } from "@/data/reviews";
const image = {
productImage, imageCollection
export default async function ProductDetail({ slug }: any) {
const imageList = {
productImage : slug.productImage,
imageCollection : slug.imageCollection
}
const priceData = {
price, marketPrice, deal_list, price_off, sale_rules, hasVAT, warranty, quantity
price : slug.price,
marketPrice : slug.marketPrice,
deal_list : slug.deal_list,
price_off : slug.price_off,
sale_rules : slug.sale_rules,
hasVAT : slug.hasVAT,
warranty : slug.warranty,
quantity : slug.quantity
}
console.log(slug)
@@ -42,27 +38,27 @@ export default async function ProductDetail({ slug }: any) {
<div className="product-detail-page container">
<div className="pd-info-container static bg-white rounded-[24px] p-6 mb-6">
<h1 className="leading-8 text-[#004BA4] text-24 mb-6 font-600">
{productName}
{slug.productName}
</h1>
<div className="gap-6 flex flex-wrap items-start leading-[18px]">
<div className="col-left-group w-[424px] sticky top-[90px]">
<ProductImage data={image} />
<ProductImage data={imageList} />
</div>
<div className="col-middle-group w-[464px]">
<div className="pb-3 mb-3 border-b border-[#DEE4EC] flex flex-wrap items-center gap-2">
<button type="button" className="m-0 flex items-center gap-1">
<i className={`star star-${review.rate}`} />
<span className="font-500"> ({review.total}) </span>
<i className={`star star-${ReviewData.summary.avgRate}`} />
<span className="font-500"> ({ReviewData.summary.total}) </span>
</button>
<i className="w-[1px] h-4 bg-[#DEE4EC]" />
<p className="m-0">
Lượt xem:
<span className="text-[#004BA4] font-500">{formatPrice(visit)}</span>
<span className="text-[#004BA4] font-500">{formatPrice(slug.visit)}</span>
</p>
<i className="w-[1px] h-4 bg-[#DEE4EC]" />
@@ -71,7 +67,7 @@ export default async function ProductDetail({ slug }: any) {
Tình trạng:
<span
dangerouslySetInnerHTML={{
__html: quantity > 0
__html: slug.quantity > 0
? '<span class="font-500 text-[#00AD4F]">Còn hàng</span>'
: '<span class="font-500 red">Liên hệ</span>'
}}
@@ -79,15 +75,15 @@ export default async function ProductDetail({ slug }: any) {
</p>
</div>
{ productSummary &&
<ProductSummary item={productSummary} />
{ slug.productSummary &&
<ProductSummary item={slug.productSummary} />
}
<ProductPrice item={priceData} />
<ProductOffer item={specialOffer}/>
<ProductOffer item={slug.specialOffer}/>
<Buttons item={productId} />
<Buttons item={slug.productId} />
<p className="m-0 flex items-center gap-3 text-16 leading-[22px]">
<i className="icons icon-truck-2 !w-6" />
@@ -103,23 +99,32 @@ export default async function ProductDetail({ slug }: any) {
<div className="pd-content-container flex flex-wrap items-baseline gap-6">
<div className="col-left w-[784px]">
{ productDescription &&
<ProductDescription name={productName} description={productDescription} />
}
{ slug.productDescription &&
<ProductDescription
name={slug.productName}
description={slug.productDescription}
/>
}
<div className="pd-comment-container bg-white mb-6 p-8 pt-6 rounded-[24px] text-16 leading-[22px]">
<Review />
<p className="leading-[31px] font-600 text-24 mb-4 pb-4">
Đánh giá và bình luận
</p>
<Review item={ReviewData}/>
<Comment />
</div>
</div>
<div className="col-right w-[440px]">
{productSpec &&
<ProductSpec item={productSpec} />
{slug.productSpec &&
<ProductSpec item={slug.productSpec} />
}
<Article />
{ slug.related['article-article'].length > 0 &&
<Article item={ slug.related['article-article'] } />
}
</div>
</div>