nshop-front-pc/src/components/layout/navbar/NavbarSearchIcon.tsx

"use client";

import { useState,useEffect } from "react";
import SearchPop from "./SearchPop";
import { usePathname } from "next/navigation";
export default function NavbarSearchIcon() {
  const [searchOpen, setSearchOpen] = useState(false);
  const pathname = usePathname();
  useEffect(() => {
    if (searchOpen) {
      queueMicrotask(() => {
        setSearchOpen(false);
      });
    }
  }, [pathname, searchOpen]);
  const handleClick = () => {
    setSearchOpen((prev) => !prev);
  };

  return (
    <>
      <button
        type="button"
        aria-label={searchOpen ? "Close search" : "Open search"}
        onClick={handleClick}
        className="flex h-6 w-6 cursor-pointer items-center justify-center"
      >
        {searchOpen ? (
          /* Close Icon */
          <svg
            xmlns="http://www.w3.org/2000/svg"
            width="18"
            height="18"
            viewBox="0 0 18 18"
            fill="none"
          >
            <path
              d="M2 2L16 16"
              stroke="black"
              strokeWidth="1.5"
              strokeLinecap="round"
            />
            <path
              d="M16 2L2 16"
              stroke="black"
              strokeWidth="1.5"
              strokeLinecap="round"
            />
          </svg>
        ) : (
          /* Search Icon */
          <svg
            xmlns="http://www.w3.org/2000/svg"
            width="17.7802734375"
            height="18.7802734375"
            viewBox="0 0 17.7802734375 18.7802734375"
            fill="none"
          >
            <circle
              cx="8.75"
              cy="8.75"
              r="8"
              stroke="black"
              strokeWidth="1.5"
            />
            <path
              d="M14.25 15.25L17.25 18.25"
              stroke="black"
              strokeWidth="1.5"
            />
          </svg>
        )}
      </button>

      <SearchPop
        open={searchOpen}
        onClose={() => setSearchOpen(false)}
      />
    </>
  );
}