update

src/features/Home/Deal/ProductItem/index.tsx

@@ -0,0 +1,78 @@
+import React from 'react';
+import { DealType } from '@/types';
+import { formatCurrency } from '@/lib/formatPrice';
+import Image from 'next/image';
+
+type ProductItemProps = {
+  item: DealType;
+};
+
+const ProductItem: React.FC<ProductItemProps> = ({ item }) => {
+  const { product_info } = item;
+  const offers = product_info.specialOffer?.all ?? [];
+
+  return (
+    <div className="product-item">
+      <a href={product_info.productUrl} className="product-image relative">
+        {product_info.productImage.large ? (
+          <Image
+            src={product_info.productImage.large}
+            width="164"
+            height="164"
+            alt={product_info.productName}
+            className="lazy"
+          />
+        ) : (
+          <Image
+            src="/static/assets/nguyencong_2023/images/not-image.png"
+            width="164"
+            height="164"
+            alt={product_info.productName}
+            className="lazy"
+          />
+        )}
+        <span className="p-type-holder">
+          {product_info.productType.isHot === 1 && <i className="p-icon-type p-icon-hot"></i>}
+          {product_info.productType.isNew === 1 && <i className="p-icon-type p-icon-new"></i>}
+        </span>
+      </a>
+      <div className="product-info">
+        <a href={product_info.productUrl}>
+          <h3 className="product-title line-clamp-3">{product_info.productName}</h3>
+        </a>
+        <div className="product-martket-main flex items-center">
+          {product_info.marketPrice > 0 ? (
+            <p className="product-market-price">{product_info.marketPrice.toLocaleString()} ₫</p>
+          ) : (
+            <p className="product-market-price">
+              {product_info.sale_rules.normal_price.toLocaleString()} ₫
+            </p>
+          )}
+          <div className="product-percent-price">-{product_info.price_off || 0}%</div>
+        </div>
+        <div className="product-price-main font-bold">
+          {item.price > '0' ? `${formatCurrency(product_info.price)}đ` : 'Liên hệ'}
+        </div>
+        <div className="p-quantity-sale">
+          <i className="sprite sprite-fire-deal"></i>
+          <div className="bg-gradient"></div>
+          <p className="js-line-deal-left"></p>
+          <span>
+            Còn {Number(item.quantity) - Number(item.sale_quantity)}/{Number(item.quantity)} sản
+            phẩm
+          </span>
+        </div>
+        {offers.length > 0 && (
+          <div
+            className="product-offer line-clamp-2"
+            dangerouslySetInnerHTML={{
+              __html: product_info.specialOffer!.all![0].title,
+            }}
+          />
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default ProductItem;