update

src/components/other/Header/HeaderMid/index.tsx

@@ -4,6 +4,8 @@ import Image from 'next/image';
 import Link from 'next/link';
 import { FaMapMarkerAlt, FaBars } from 'react-icons/fa';
 import BoxShowroom from '@/components/Common/BoxShowroom';
+import BoxHotLine from '../../BoxHotline';
+
 import { TypeCartItem } from '@/types/cart';
 import { formatCurrency } from '@/lib/formatPrice';
 
@@ -30,6 +32,11 @@ const HeaderMid: React.FC = () => {
     modal?.showModal();
   };
 
+  const PopupHotLine = () => {
+    const modal = document.getElementById('boxHotline') as HTMLDialogElement;
+    modal?.showModal();
+  };
+
   return (
     <div className="header-middle">
       <div className="container flex items-center justify-between">
@@ -89,15 +96,15 @@ const HeaderMid: React.FC = () => {
               <span className="font-500">Xây dựng cấu hình</span>
             </Link>
 
-            <Link
-              href="javascript:void(0)"
+            <button
+              onClick={PopupHotLine}
               className="item-tab-header flex flex-col items-center gap-4"
             >
               <p className="icon-item-tab flex items-center justify-center">
                 <i className="sprite sprite-lienhe-header"></i>
               </p>
               <span className="font-500">Khách hàng liên hệ</span>
-            </Link>
+            </button>
 
             <Link href="/tin-tuc" className="item-tab-header flex flex-col items-center gap-4">
               <p className="icon-item-tab flex items-center justify-center">
@@ -181,6 +188,7 @@ const HeaderMid: React.FC = () => {
         </div>
       </div>
       <BoxShowroom />
+      <BoxHotLine />
     </div>
   );
 };