update

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;

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} />

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">

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;