update

src/components/layout/Header/HeaderBottomRight.tsx

@@ -0,0 +1,112 @@
+'use client';
+import React from 'react';
+import { menuData } from './menuData'; // Đảm bảo file này export menuData
+import Link from 'next/link';
+import { FaCaretDown } from 'react-icons/fa';
+
+const HeaderBottomRight: React.FC = () => {
+  // 1. Lọc các ID danh mục hiển thị trên Header (Cấp 1)
+  const allowedIds = ['407', '408', '3300', '281', '3431', '410', '3403'];
+
+  // 2. Hàm lấy Icon và Title dựa theo ID
+  const getCategoryInfo = (id: string) => {
+    switch (id) {
+      case '407':
+        return { icon: 'sprite-laptop', title: 'Laptop' };
+      case '408':
+        return { icon: 'sprite-PC', title: 'PC' };
+      case '3300':
+        return { icon: 'sprite-PC', title: 'PC AI' };
+      case '281':
+        return { icon: 'sprite-manhinh', title: 'Màn hình' };
+      case '3431':
+        return { icon: 'sprite-linhkien', title: 'Linh kiện PC' };
+      case '410':
+        return { icon: 'sprite-phimchuot', title: 'Phím chuột ghế gear' };
+      case '3403':
+        return { icon: 'sprite-thietbi', title: 'Thiết bị văn phòng' };
+      default:
+        return { icon: '', title: '' };
+    }
+  };
+
+  // Lấy danh sách all_category từ menuData[0]
+  const allCategories = menuData[0]?.product?.all_category || [];
+
+  return (
+    <>
+      {allCategories.map((item) => {
+        if (!allowedIds.includes(item.id)) return null;
+
+        const info = getCategoryInfo(item.id);
+
+        return (
+          <li key={item.id} className="item-category-header" data-id={item.id}>
+            <Link href={item.id === '408' ? '#' : item.url} className="flex items-center gap-6">
+              <i className={`sprite-more ${info.icon}`}></i>
+              <span className="title-header-bottom">{info.title}</span>
+              <FaCaretDown size="16" className='text-white' />
+            </Link>
+
+            <div className="list-category-child flex justify-between">
+              <div className="box-left">
+                <ul className="flex flex-wrap gap-8">
+                  {item.isParent === '1' && (
+                    <>
+                      {item.id === '408'
+                        ? allCategories
+                            .filter((c) => ['408', '3201', '1829', '3300', '3691'].includes(c.id))
+                            .map((child1) => (
+                              <li key={child1.id} className="sub-menu">
+                                <Link href={child1.url} className="child-lv2 block font-bold">
+                                  {child1.title}
+                                </Link>
+                                {child1.isParent === '1' && (
+                                  <div className="list-child-lv3 flex-column mt-10 flex">
+                                    {child1.children?.map((child2) => (
+                                      <Link key={child2.id} href={child2.url} className="child-lv3">
+                                        {child2.title}
+                                      </Link>
+                                    ))}
+                                  </div>
+                                )}
+                              </li>
+                            ))
+                        : item.children?.map((_item_child) => (
+                            <li key={_item_child.id} className="sub-menu">
+                              <Link href={_item_child.url} className="child-lv2 block font-bold">
+                                {_item_child.title}
+                              </Link>
+                              {_item_child.isParent === '1' && (
+                                <div className="list-child-lv3 flex-column mt-10 flex">
+                                  {_item_child.children?.map((_item_childtwo) => (
+                                    <Link
+                                      key={_item_childtwo.id}
+                                      href={_item_childtwo.url}
+                                      className="child-lv3"
+                                    >
+                                      {_item_childtwo.title}
+                                    </Link>
+                                  ))}
+                                </div>
+                              )}
+                            </li>
+                          ))}
+                    </>
+                  )}
+                </ul>
+              </div>
+
+              <div className={`box-right flex-1 product-category-${item.id}`}>
+                <p className="title font-weight-700">Bán chạy nhất</p>
+                <div className="list-product-bestsale" id={`product-category-${item.id}`}></div>
+              </div>
+            </div>
+          </li>
+        );
+      })}
+    </>
+  );
+};
+
+export default HeaderBottomRight;