update

src/components/home/CategoryFeature/ItemCategory/index.tsx

@@ -0,0 +1,34 @@
+'use client';
+import React from 'react';
+import Image from 'next/image';
+import Link from 'next/link';
+import { Category } from '@/types/global/Menu';
+
+const ItemCategory: React.FC<{ item: Category }> = ({ item }) => {
+  return (
+    <Link href={item.url} className="item-category flex flex-col items-center">
+      <p className="item-category-img">
+        {item.thumnail ? (
+          <Image
+            src={item.thumnail}
+            width={50}
+            height={50}
+            alt={item.title}
+            className="swiper-lazy lazy"
+          />
+        ) : (
+          <Image
+            src="https://nguyencongpc.vn/static/assets/nguyencong_2023/images/not-image.png"
+            width={50}
+            height={50}
+            alt={item.title}
+            className="border-radius-10"
+          />
+        )}
+      </p>
+      <p className="title line-clamp-2">{item.title}</p>
+    </Link>
+  );
+};
+
+export default ItemCategory;

src/components/home/CategoryFeature/index.tsx

@@ -0,0 +1,29 @@
+'use client';
+import React from 'react';
+import { menuData } from '../../other/Header/menuData';
+import ItemCategory from './ItemCategory';
+import { InfoCategory } from '@/types';
+
+const renderFeaturedCategories = (categories: InfoCategory[]) => {
+  return categories.map((cat, idx) => (
+    <React.Fragment key={idx}>
+      {cat.is_featured == '1' && <ItemCategory item={cat} />}
+      {cat.children && renderFeaturedCategories(cat.children)}
+    </React.Fragment>
+  ));
+};
+
+const CategoryFeature = () => {
+  return (
+    <div className="box-category-outstanding boder-radius-10">
+      <div className="title-box">
+        <h2 className="title title-box font-[600]">Danh mục nổi bật</h2>
+      </div>
+      <div className="list-category-outstanding grid grid-cols-10 gap-3">
+        {renderFeaturedCategories(menuData[0].product.all_category)}
+      </div>
+    </div>
+  );
+};
+
+export default CategoryFeature;