- [Tặng bàn phím] HHPC ULTRA 7 265K | 32GB DDR5 | NVIDIA RTX 3060 12GB
+ {productName}
Giá bán:
- 48.990.000 đ
- 52.000.000 đ
- -6%
+ {priceView}
+
+ {discount > 0 &&
+ <>
+ {formatPrice(marketPrice)} đ
+
+ -{discount}%
+
+
+ }
-
- Bảo hành:
- Theo từng linh kiện
-
+ {warranty &&
+
+ Bảo hành:
+ {warranty}
+
+ }
+
+ {displaySummary &&
+
+
+
+ Thông số sản phẩm
+
-
-
-
- Thông số sản phẩm
-
-
-
-
CPU: INTEL CORE i5 13400F up 4.6GHz | 10 CORE | 16 THREAD
-
RAM: DDR4 16GB (1x16G) 3200 MHz
-
VGA: NVIDIA RTX 3060 12GB GDDR6
+
-
+ }
-
-
-
- Khuyến mại hấp dẫn
-
+ { displayOffer &&
+
+
+
+ Khuyến mại hấp dẫn
+
-
-
⭐ Bảo Hành Tại Nơi Sử Dụng (Áp Dụng Nội Thành Hà Nội và Hồ Chí Minh)
-
⭐ Bảo Hành Siêu Tốc 1 Đổi 1 Trong 24h
⭐ Miễn Phí 100% Vận Chuyển Toàn Quốc
+
-
+ }
diff --git a/src/hooks/useProductItem.ts b/src/hooks/useProductItem.ts
index 8089316..4f0183c 100644
--- a/src/hooks/useProductItem.ts
+++ b/src/hooks/useProductItem.ts
@@ -1,19 +1,31 @@
-import { calculateDiscount } from "../lib/utils";
import type { ProductItemProps } from "../types/product"
-export function useDealItem(item: ProductItemProps) {
+import {
+ calculateDiscount,
+ formatTextList
+} from "../lib/utils";
+
+
+export function useProductItem(item: ProductItemProps) {
+ const productId = Number(item.productId);
+ const quantity = Number(item.quantity);
+ const price = Number(item.price);
+ const marketPrice = Number(item.marketPrice);
+ const discount = calculateDiscount(price, marketPrice);
const productUrl = item.productUrl;
const productImage = item.productImage.large;
const productName = item.productName;
- const price = Number(item.price);
- const marketPrice = Number(item.marketPrice);
- const discount = calculateDiscount(price, marketPrice);
- const quantity = item.quantity;
- const specialOffer = item.specialOffer.all?.[0]?.title ?? '';
+ const specialOffer = item.specialOffer.all[0]?.title ?? null;
+const displayOffer = specialOffer
+ ? formatTextList(specialOffer)
+ : null;
+
const warranty = item.warranty;
- const productSummary= item.productSummary;
+ const productSummary = item.productSummary;
+ const displaySummary = formatTextList(item.productSummary)
return {
+ productId,
productUrl,
productImage,
productName,
@@ -21,8 +33,8 @@ export function useDealItem(item: ProductItemProps) {
price,
marketPrice,
discount,
- specialOffer,
+ specialOffer, displayOffer,
warranty,
- productSummary
+ productSummary, displaySummary,
};
}
diff --git a/src/hooks/useTooltip.ts b/src/hooks/useTooltip.ts
new file mode 100644
index 0000000..bb8b668
--- /dev/null
+++ b/src/hooks/useTooltip.ts
@@ -0,0 +1,65 @@
+'use client';
+
+import { useEffect } from 'react';
+
+export function useTooltip() {
+ useEffect(() => {
+ const tooltip = document.getElementById('js-tooltip') as HTMLDivElement | null;
+ if (!tooltip) return;
+
+ const pad = 10;
+
+ function onMouseMove(e: MouseEvent) {
+ const img = e.currentTarget as HTMLElement | null;
+ if (!img) return;
+
+ const product = img.closest('.js-p-item');
+ const content = product?.querySelector
('.p-tooltip');
+
+ if (!content) {
+ tooltip.style.display = 'none';
+ return;
+ }
+
+ tooltip.innerHTML = content.innerHTML;
+ tooltip.style.display = 'block';
+
+ const w = tooltip.offsetWidth;
+ const h = tooltip.offsetHeight;
+
+ const wrapRight = window.innerWidth;
+ const wrapTop = window.scrollY;
+
+ const left =
+ e.pageX + w > wrapRight
+ ? e.pageX - w - pad
+ : e.pageX + pad;
+
+ const top =
+ e.pageY - h < wrapTop
+ ? wrapTop
+ : e.pageY - h - pad;
+
+ tooltip.style.left = `${left}px`;
+ tooltip.style.top = `${top}px`;
+ }
+
+ function onMouseOut() {
+ tooltip.style.display = 'none';
+ }
+
+ const images = document.querySelectorAll('.js-p-item img');
+
+ images.forEach(img => {
+ img.addEventListener('mousemove', onMouseMove);
+ img.addEventListener('mouseout', onMouseOut);
+ });
+
+ return () => {
+ images.forEach(img => {
+ img.removeEventListener('mousemove', onMouseMove);
+ img.removeEventListener('mouseout', onMouseOut);
+ });
+ };
+ }, []);
+}
diff --git a/src/lib/utils.tsx b/src/lib/utils.tsx
index f7909bd..d0e8b70 100644
--- a/src/lib/utils.tsx
+++ b/src/lib/utils.tsx
@@ -1,3 +1,6 @@
+import { ReactNode } from 'react';
+
+
// Add tất cả sp trong data product vào 1 mảng
import { productList } from '@/data/products';
@@ -5,6 +8,41 @@ export function getAllProducts() {
return productList.flatMap((group:any) => group.list);
}
+
+export function formatTextList(
+ text?: string | any[],
+ limit = 5
+) {
+ if (!text) return '';
+
+ if (typeof window === 'undefined') {
+ // server: trả raw HTML
+ return Array.isArray(text)
+ ? String(text[1] ?? '')
+ : String(text);
+ }
+
+ const html = Array.isArray(text)
+ ? String(text[1] ?? '')
+ : String(text);
+
+ if (!html) return '';
+
+ const parser = new DOMParser();
+ const doc = parser.parseFromString(html, 'text/html');
+
+ const nodes = Array.from(
+ doc.body.querySelectorAll('p, div, li')
+ );
+
+ return nodes
+ .slice(0, limit)
+ .map(node => `${node.innerHTML}
`)
+ .join('');
+}
+
+
+
// Format giá
export function formatPrice(amount: number) {
return amount.toLocaleString('vi-VN');
diff --git a/src/types/product.ts b/src/types/product.ts
index 4e42d34..5fc679f 100644
--- a/src/types/product.ts
+++ b/src/types/product.ts
@@ -1,12 +1,13 @@
// src/types/deal.ts
export type ProductItemProps = {
- price: number;
- quantity: number;
- productUrl: string;
- productImage: string;
- productName: string;
- marketPrice : number;
- specialOffer : string;
- warranty: string;
- productSummary: string;
+ productId : number;
+ price : number;
+ marketPrice : number;
+ quantity : number;
+ productUrl : string;
+ productName : string;
+ warranty : string;
+ productSummary : string;
+ productImage : any;
+ specialOffer : any;
};