Initial Commit

components/headers/SearchPopup.jsx

@@ -0,0 +1,79 @@
+"use client";
+
+import { useEffect, useRef, useState } from "react";
+
+export default function SearchPopup() {
+  const [isActive, setisActive] = useState(false);
+  const popupRef = useRef(null);
+
+  useEffect(() => {
+    function handleClickOutside(event) {
+      if (popupRef.current && !popupRef.current.contains(event.target)) {
+        // Clicked outside the popup
+        setisActive(false);
+        // Perform close action here
+      }
+    }
+
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+    };
+  }, []);
+  return (
+    <div className="popup-show-form" ref={popupRef}>
+      <a
+        href="#"
+        onClick={(e) => {
+          e.preventDefault();
+          setisActive((pre) => !pre);
+        }}
+        className="tf-btn btn-white btn-find btn-show"
+      >
+        <i className="icon-search-solid" />
+        <span className="bg-effect" />
+      </a>
+      <div
+        className={`popup-show popup-form-search ${isActive ? "show" : ""} `}
+      >
+        <div className="close-form">
+          <i className="icon-times-solid" />
+        </div>
+        <form
+          className="form-search style-line-bot style-1"
+          onSubmit={(e) => e.preventDefault()}
+        >
+          <fieldset className="text">
+            <input
+              type="text"
+              placeholder="Search..."
+              className=""
+              name="text"
+              tabIndex={0}
+              defaultValue=""
+              aria-required="true"
+              required
+            />
+          </fieldset>
+          <button className="" type="submit">
+            <i className="icon icon-search-solid" />
+          </button>
+        </form>
+        <ul className="wrap-tag d-flex align-items-center flex-wrap gap_16">
+          <li className="tag-item d-flex align-items-center gap_12">
+            <span className="sub-heading text_black">Blog</span>
+            <span className="remove-item">
+              <i className="icon-times-solid" />
+            </span>
+          </li>
+          <li className="tag-item d-flex align-items-center gap_12">
+            <span className="sub-heading text_black">Single Post</span>
+            <span className="remove-item">
+              <i className="icon-times-solid" />
+            </span>
+          </li>
+        </ul>
+      </div>
+    </div>
+  );
+}