update

src/components/home/Deal/index.tsx

@@ -0,0 +1,45 @@
+'use client';
+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';
+import ProductItem from './ProductItem';
+import { productDealData } from './productDealData';
+
+const BoxProductDeal: React.FC = () => {
+  return (
+    <div className="box-product-deal boder-radius-10">
+      <div className="box-title-deal flex items-center justify-between">
+        <div className="title-deal flex items-center justify-center gap-10">
+          <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-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} />
+        </a>
+      </div>
+      <div className="box-list-item-deal swiper-box-deal">
+        <Swiper
+          modules={[Autoplay, Navigation, Pagination]}
+          spaceBetween={12}
+          slidesPerView={6}
+          loop={true}
+          navigation={true}
+        >
+          {productDealData.map((item, index) => (
+            <SwiperSlide key={index}>
+              <ProductItem item={item} />
+            </SwiperSlide>
+          ))}
+        </Swiper>
+      </div>
+    </div>
+  );
+};
+
+export default BoxProductDeal;