From 8a9ebab4714737a60a5522cc136aa7cac4a3d605 Mon Sep 17 00:00:00 2001
From: Tieptk <tieptk@hurasoft.com>
Date: Fri, 19 Dec 2025 13:42:52 +0700
Subject: [PATCH] update

---
 .../layout/home/BoxDeal/CounDown.tsx          | 57 +++++++++++++++++++
 .../BoxDeal/{BoxProductDeal.tsx => index.tsx} |  5 +-
 .../home/{ => SliderHome}/bannerData.ts       |  0
 .../{SliderHome.tsx => SliderHome/index.tsx}  |  0
 src/components/layout/home/index.tsx          |  2 +-
 src/styles/globals.css                        |  1 -
 6 files changed, 62 insertions(+), 3 deletions(-)
 create mode 100644 src/components/layout/home/BoxDeal/CounDown.tsx
 rename src/components/layout/home/BoxDeal/{BoxProductDeal.tsx => index.tsx} (93%)
 rename src/components/layout/home/{ => SliderHome}/bannerData.ts (100%)
 rename src/components/layout/home/{SliderHome.tsx => SliderHome/index.tsx} (100%)

diff --git a/src/components/layout/home/BoxDeal/CounDown.tsx b/src/components/layout/home/BoxDeal/CounDown.tsx
new file mode 100644
index 0000000..e3aa8c6
--- /dev/null
+++ b/src/components/layout/home/BoxDeal/CounDown.tsx
@@ -0,0 +1,57 @@
+'use client';
+import React, { useState, useEffect } from 'react';
+
+const CounDown: React.FC = () => {
+  const [days, setDays] = useState(0);
+  const [hours, setHours] = useState(0);
+  const [minutes, setMinutes] = useState(0);
+  const [seconds, setSeconds] = useState(0);
+
+  const deadline: Date = new globalThis.Date('2025-12-31');
+
+  const getTime = () => {
+    const time = deadline.getTime() - Date.now();
+
+    setDays(Math.floor(time / (1000 * 60 * 60 * 24)));
+    setHours(Math.floor((time / (1000 * 60 * 60)) % 24));
+    setMinutes(Math.floor((time / 1000 / 60) % 60));
+    setSeconds(Math.floor((time / 1000) % 60));
+  };
+
+  useEffect(() => {
+    const interval = setInterval(() => getTime(), 1000);
+
+    return () => clearInterval(interval);
+  }, []);
+
+  return (
+    <>
+      <div className="flex flex-col">
+        <div className="flex items-center gap-2">
+          <p> {days < 10 ? '0' + days : days} </p> <span>:</span>
+        </div>
+        <span className="blocl mt-1 text-sm">Ngày</span>
+      </div>
+      <div className="flex flex-col">
+        <div className="flex items-center gap-2">
+          <p>{hours < 10 ? '0' + hours : hours} </p> <span>:</span>
+        </div>
+        <span className="blocl mt-1 text-sm">Giờ</span>
+      </div>
+      <div className="flex flex-col">
+        <div className="flex items-center gap-2">
+          <p>{minutes < 10 ? '0' + minutes : minutes} </p> <span>:</span>
+        </div>
+        <span className="blocl mt-1 text-sm">Phút</span>
+      </div>
+      <div className="flex flex-col">
+        <div className="flex items-center gap-2">
+          <p>{seconds < 10 ? '0' + seconds : seconds} </p>
+        </div>
+        <span className="blocl mt-1 text-sm">Giây</span>
+      </div>
+    </>
+  );
+};
+
+export default CounDown;
diff --git a/src/components/layout/home/BoxDeal/BoxProductDeal.tsx b/src/components/layout/home/BoxDeal/index.tsx
similarity index 93%
rename from src/components/layout/home/BoxDeal/BoxProductDeal.tsx
rename to src/components/layout/home/BoxDeal/index.tsx
index 6ff7fe3..520687f 100644
--- a/src/components/layout/home/BoxDeal/BoxProductDeal.tsx
+++ b/src/components/layout/home/BoxDeal/index.tsx
@@ -3,6 +3,7 @@ import React from 'react';
 import { Swiper, SwiperSlide } from 'swiper/react';
 import { Autoplay, Navigation, Pagination } from 'swiper/modules';
 import { FaCaretRight } from 'react-icons/fa';
+import CounDown from './CounDown';
 
 const BoxProductDeal: React.FC = () => {
   return (
@@ -12,7 +13,9 @@ const BoxProductDeal: React.FC = () => {
           <i className="sprite sprite-icon-deal-home"></i>
           <h2 className="title font-bold">Giá tốt mỗi ngày</h2>
           <span className="text-time-deal-home color-white fz-16 font-bold">Kết thúc sau</span>
-          <div className="global-time-deal flex items-center gap-6"></div>
+          <div className="global-time-deal flex items-center gap-2">
+            <CounDown />
+          </div>
         </div>
         <a href="/deal" className="button-deal color-white mb-10 flex items-center">
           Xem thêm khuyến mãi <FaCaretRight size={16} />
diff --git a/src/components/layout/home/bannerData.ts b/src/components/layout/home/SliderHome/bannerData.ts
similarity index 100%
rename from src/components/layout/home/bannerData.ts
rename to src/components/layout/home/SliderHome/bannerData.ts
diff --git a/src/components/layout/home/SliderHome.tsx b/src/components/layout/home/SliderHome/index.tsx
similarity index 100%
rename from src/components/layout/home/SliderHome.tsx
rename to src/components/layout/home/SliderHome/index.tsx
diff --git a/src/components/layout/home/index.tsx b/src/components/layout/home/index.tsx
index 5d0a1d7..a48a476 100644
--- a/src/components/layout/home/index.tsx
+++ b/src/components/layout/home/index.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import SliderHome from './SliderHome';
-import BoxProductDeal from './BoxDeal/BoxProductDeal';
+import BoxProductDeal from './BoxDeal';
 const Home = () => {
   return (
     <div className="page-hompage mt-4">
diff --git a/src/styles/globals.css b/src/styles/globals.css
index bde4744..4a390ee 100644
--- a/src/styles/globals.css
+++ b/src/styles/globals.css
@@ -2230,7 +2230,6 @@ textarea::placeholder {
   color: #cb1c21;
   border-radius: 3px;
   background: #fff;
-  padding: 8px;
   font-size: 16px;
   width: 32px;
   height: 28px;