update

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

@@ -0,0 +1,132 @@
+'use client';
+import React, { useState } from 'react';
+import Image from 'next/image';
+import Link from 'next/link';
+import { FaMapMarkerAlt, FaBars } from 'react-icons/fa';
+import BoxShowroom from '@components/common/BoxShowroom';
+
+const HeaderMid: React.FC = () => {
+  const PopupAddress = () => {
+    const modal = document.getElementById('boxShowroom') as HTMLDialogElement;
+    modal?.showModal();
+  };
+
+  return (
+    <div className="header-middle">
+      <div className="container flex items-center justify-between">
+        <div className="header-middle-left flex items-center">
+          <Link href="/">
+            <Image
+              src="https://nguyencongpc.vn/media/lib/18-02-2025/logowhite-dfvefb.png"
+              width="170"
+              height="38"
+              alt="logo"
+              className="logo-header"
+            />
+          </Link>
+          <button className="icon-showroom flex items-center justify-center" onClick={PopupAddress}>
+            <FaMapMarkerAlt size={16} />
+          </button>
+        </div>
+        <div className="header-middle-right flex items-center">
+          <div className="header-menu-category">
+            <div className="box-title flex items-center justify-center gap-8">
+              <FaBars size={16} />
+              <p className="title-menu font-weight-500">Danh mục sản phẩm</p>
+            </div>
+            <div className="cau-noi"></div>
+          </div>
+          <div className="header-search-group">
+            <form method="get" action="/tim" name="searchForm">
+              <div className="box-search-input">
+                <input
+                  type="text"
+                  id="js-search-box"
+                  name="q"
+                  className="form-group-input"
+                  placeholder="Bạn cần tìm gì?"
+                />
+              </div>
+              <button
+                type="submit"
+                id="js-search-button"
+                aria-label="submit-search"
+                className="search-btn-header"
+              >
+                <i className="sprite sprite-search-header icon-search"></i>
+              </button>
+            </form>
+
+            <div className="search-results">
+              <div className="search-results-list"></div>
+            </div>
+          </div>
+
+          <div className="box-tabs-header flex items-center">
+            <Link href="/buildpc" className="item-tab-header flex-column flex items-center gap-4">
+              <p className="icon-item-tab flex items-center justify-center">
+                <i className="sprite sprite-buildpc-header"></i>
+              </p>
+              <span className="font-500">Xây dựng cấu hình</span>
+            </Link>
+
+            <Link
+              href="javascript:void(0)"
+              className="item-tab-header flex-column flex 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>
+
+            <Link href="/tin-tuc" className="item-tab-header flex-column flex items-center gap-4">
+              <p className="icon-item-tab flex items-center justify-center">
+                <i className="sprite sprite-article-header"></i>
+              </p>
+              <span className="font-weight-500">Tin tức công nghệ</span>
+            </Link>
+
+            <div id="js-header-cart" className="position-relative">
+              <Link href="/cart" className="item-tab-header flex-column flex items-center gap-4">
+                <p className="icon-item-tab icon-cart-header flex items-center justify-center">
+                  <i className="sprite sprite-cart-header"></i>
+                  <u className="cart-count header-features-cart-amount">1</u>
+                </p>
+                <span className="font-weight-500">Giỏ hàng</span>
+              </Link>
+              <div className="cau-noi"></div>
+              <div className="cart-ttip" id="js-cart-tooltip">
+                <div className="cart-ttip-item-container"></div>
+                <div className="cart-ttip-price justify-content-end flex items-center gap-6">
+                  <p>Tổng tiền hàng</p>
+                  <p id="js-header-cart-quantity" className="font-weight-500"></p>
+                  <p id="js-header-cart-total-price" className="font-weight-700"></p>
+                </div>
+                <Link
+                  href="/cart"
+                  className="cart-ttip-price-button flex items-center justify-center"
+                >
+                  <p className="font-weight-700">THANH TOÁN NGAY </p>
+                </Link>
+              </div>
+            </div>
+
+            <Link
+              href="/taikhoan"
+              className="user-header item-tab-header flex-column flex items-center gap-4"
+            >
+              <p className="icon-item-tab flex items-center justify-center">
+                <i className="sprite sprite-account-header"></i>
+              </p>
+              <span className="font-weight-500">Tài khoản</span>
+            </Link>
+          </div>
+        </div>
+      </div>
+      <BoxShowroom />
+    </div>
+  );
+};
+
+export default HeaderMid;