update

src/components/home/Deal/ProductItem/index.tsx

@@ -1,17 +1,12 @@
 import React from 'react';
-import Tippy from '@tippyjs/react';
-import 'tippy.js/dist/tippy.css';
 import { DealType } from '@/types';
+import { formatCurrency } from '@/lib/formatPrice';
+import Image from 'next/image';
 
 type ProductItemProps = {
   item: DealType;
 };
 
-const formatCurrency = (value: number | string) => {
-  const num = typeof value === 'string' ? parseInt(value) : value;
-  return num.toLocaleString('vi-VN');
-};
-
 const ProductItem: React.FC<ProductItemProps> = ({ item }) => {
   const { product_info } = item;
   const offers = product_info.specialOffer?.all ?? [];
@@ -20,7 +15,7 @@ const ProductItem: React.FC<ProductItemProps> = ({ item }) => {
     <div className="product-item">
       <a href={product_info.productUrl} className="product-image relative">
         {product_info.productImage.large ? (
-          <img
+          <Image
             src={product_info.productImage.large}
             width="164"
             height="164"
@@ -28,7 +23,7 @@ const ProductItem: React.FC<ProductItemProps> = ({ item }) => {
             className="lazy"
           />
         ) : (
-          <img
+          <Image
             src="/static/assets/nguyencong_2023/images/not-image.png"
             width="164"
             height="164"

src/components/home/Deal/index.tsx

@@ -1,10 +1,14 @@
 'use client';
 import React from 'react';
+import Link from 'next/link';
 import { Swiper, SwiperSlide } from 'swiper/react';
 import { Autoplay, Navigation, Pagination } from 'swiper/modules';
 import { FaCaretRight } from 'react-icons/fa';
 
+import { productDealData } from './productDealData';
+
 import CounDown from './CounDown';
+import ProductItem from './ProductItem';
 
 const BoxProductDeal: React.FC = () => {
   return (
@@ -18,9 +22,9 @@ const BoxProductDeal: React.FC = () => {
             <CounDown />
           </div>
         </div>
-        <a href="/deal" className="button-deal color-white mb-10 flex items-center">
+        <Link href="/deal" className="button-deal color-white mb-10 flex items-center">
           Xem thêm khuyến mãi <FaCaretRight size={16} />
-        </a>
+        </Link>
       </div>
       <div className="box-list-item-deal swiper-box-deal">
         <Swiper
@@ -29,7 +33,13 @@ const BoxProductDeal: React.FC = () => {
           slidesPerView={6}
           loop={true}
           navigation={true}
-        ></Swiper>
+        >
+          {productDealData.map((Item, index) => (
+            <SwiperSlide key={index}>
+              <ProductItem item={Item} />
+            </SwiperSlide>
+          ))}
+        </Swiper>
       </div>
     </div>
   );