update

src/components/Deal/ItemDeal.tsx

@@ -0,0 +1,95 @@
+'use client';
+import React, { useState } from 'react';
+import { parse } from 'date-fns';
+import Link from 'next/link';
+import Image from 'next/image';
+import CounDown from '@/components/Common/CounDown';
+import { DealType } from '@/types';
+import { formatCurrency } from '@/lib/formatPrice';
+
+type ItemDealProps = {
+  Item: DealType;
+};
+
+const ItemDeal: React.FC<ItemDealProps> = ({ Item }) => {
+  const [now] = useState(() => Date.now());
+
+  // ép kiểu to_time sang số (timestamp) hoặc Date
+  const deadline = parse(Item.to_time, 'dd-MM-yyyy, h:mm a', new Date()).getTime();
+
+  // chỉ hiển thị nếu deadline còn lớn hơn thời gian hiện tại
+  if (deadline <= now) {
+    return null;
+  }
+
+  return (
+    <div className="product-item">
+      <div className="item-deal">
+        <Link href={Item.product_info.productUrl} className="product-image position-relative">
+          <Image
+            src={Item.product_info.productImage.large}
+            width={250}
+            height={250}
+            alt={Item.product_info.productName}
+          />
+        </Link>
+        <div className="product-info flex-1">
+          <Link href={Item.product_info.productUrl}>
+            <h3 className="product-title line-clamp-3">{Item.product_info.productName}</h3>
+          </Link>
+          <div className="product-martket-main flex items-center">
+            {Item.product_info.marketPrice > 0 && (
+              <>
+                <p className="product-market-price">
+                  {Item.product_info.marketPrice.toLocaleString()} ₫
+                </p>
+                <div className="product-percent-price">-{Item.product_info.price_off || 0}%</div>
+              </>
+            )}
+          </div>
+          <div className="product-price-main font-bold">
+            {Item.product_info.price > '0'
+              ? `${formatCurrency(Item.product_info.price)}đ`
+              : 'Liên hệ'}
+          </div>
+          <div className="p-quantity-sale">
+            <i className="sprite sprite-fire-deal"></i>
+            <div className="bg-gradient"></div>
+            {(() => {
+              const percentRemaining =
+                ((Number(Item.quantity) - Number(Item.sale_quantity)) / Number(Item.quantity)) *
+                100;
+
+              return (
+                <>
+                  <p className="js-line-deal-left" style={{ width: `${percentRemaining}%` }}></p>
+                </>
+              );
+            })()}
+            <span>
+              Còn {Number(Item.quantity) - Number(Item.sale_quantity)}/{Number(Item.quantity)} sản
+              phẩm
+            </span>
+          </div>
+          <div className="js-item-deal-time js-item-time-25404">
+            <div className="time-deal-page flex items-center justify-center gap-2">
+              <div>Kết thúc sau: </div>
+              <CounDown deadline={Item.to_time} />
+            </div>
+          </div>
+          <a href="javascript:buyNow(25404)" className="buy-now-deal">
+            Mua giá sốc
+          </a>
+          <Link
+            href="/bts-gaming-02"
+            className="text-deal-item color-primary mt-3 hidden font-bold"
+          >
+            Xem sản phẩm
+          </Link>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default ItemDeal;