update 15/01

src/components/home/Product/CategoryIcon.tsx

@@ -0,0 +1,34 @@
+export default function CategoryIcon({item}:any) {    
+    return(
+        <>
+            {item == 1 &&
+                <p className="m-0">
+                    <i className="icons icon-wallet"></i>
+                    <span> Trả góp 0% </span>
+                </p>
+            }
+            
+
+            {item == 91 || item == 27 &&
+                <p className="m-0">
+                    <i className="icons icon-truck"></i>
+                    <span> Miễn phí giao hàng </span>
+                </p>
+            }
+
+            {item == 103 &&
+                <p className="m-0">
+                    <i className="icons icon-world"></i>
+                    <span> Giao hàng toàn quốc </span>
+                </p>
+            }
+
+            {item == 92 &&
+                <p className="m-0">
+                    <i className="icons icon-medal"></i>
+                    <span> Bảo hành tận nơi </span>
+                </p>
+            }
+        </>
+    )
+}

src/components/home/featured-category/index.tsx

@@ -2,20 +2,39 @@ import { categories } from "@/data/categories";
 
 export default function FeaturedProductCategories() {
     const {all_category} = categories.product;
+    
+    const getAllCategoriesFlat = (cats: any[]): any[] => {
+        const result: any[] = [];
+        
+        cats.forEach((cat) => {
+            result.push(cat);
+            
+            if (cat.children && cat.children.length > 0) {
+                result.push(...getAllCategoriesFlat(cat.children));
+            }
+        });
+        
+        return result;
+    };
+
+    const allCategoriesFlat = getAllCategoriesFlat(all_category);
+    // Lọc các danh mục nổi bật
+    const featuredCategories = allCategoriesFlat.filter(
+        (item: any) => item.is_featured === 1
+    );
 
     return (
         <>
-        {all_category && 
+        {featuredCategories.length && 
             <div className="home-categories-container bg-white rounded-[24px] my-10 p-6 pb-8">
                 <h2 className="group-title font-600 text-[28px] text-[#004BA4] mb-5 leading-9"> Danh mục nổi bật </h2>
 
                 <div className="grid grid-cols-10 gap-6">
-                    {all_category
-                        .filter( (item:any) => item.is_featured === 1 )
+                    {featuredCategories
                         .map( (item:any) => 
                             <a href={item.url} className="item" key={item.id}>
                                 <i className="image lazy" 
-                                    style={{ backgroundImage: `url(${item.thumnail})` }}
+                                    style={{ backgroundImage: `url(${item.thumnail ? item.thumnail : '/images/avatar-admin.png'})` }}
                                 ></i>
                                 
                                 <span className="block">

src/components/home/index.tsx

@@ -1,6 +1,6 @@
 import Slider from "./slider";
 import Deal from "./deal";
-import FeaturedProductCategories from "./category";
+import FeaturedProductCategories from "./featured-category";
 import ProductCategories from "./product";
 import Article from "./article";