From 2a043e5932b56478508c3d3563afe34c10a56766 Mon Sep 17 00:00:00 2001
From: Ehsan <ehsanahmadi8338@gmail.com>
Date: Fri, 25 Oct 2024 03:42:25 +0330
Subject: [PATCH] popover search bar header

---
 app/component/Field.js                        |  2 +
 app/component/TimePickerField.js              |  5 +-
 components/contactUs/Connect.js               |  6 +-
 components/icons/TickAlert.js                 | 25 +++++++
 components/layoutPanel/header/icons/Search.js | 68 +++++++++++++++++++
 components/layoutPanel/header/icons/index.js  | 17 +----
 6 files changed, 103 insertions(+), 20 deletions(-)
 create mode 100644 components/icons/TickAlert.js
 create mode 100644 components/layoutPanel/header/icons/Search.js

diff --git a/app/component/Field.js b/app/component/Field.js
index 092565c..92470ca 100644
--- a/app/component/Field.js
+++ b/app/component/Field.js
@@ -3,6 +3,8 @@ import { TextField } from "@mui/material";
 function Field({ title, type, props, multiline, isPlaceHolder }) {
   return (
     <TextField
+      {...props}
+      size="small"
       placeholder={isPlaceHolder && title}
       label={!isPlaceHolder ? title : ""}
       type={type || "text"}
diff --git a/app/component/TimePickerField.js b/app/component/TimePickerField.js
index 8861b16..4b73014 100644
--- a/app/component/TimePickerField.js
+++ b/app/component/TimePickerField.js
@@ -1,6 +1,9 @@
 import { useRef, useState } from "react";
 import { AdapterDayjs } from "@mui/x-date-pickers/AdapterDayjs";
-import { DesktopTimePicker, LocalizationProvider } from "@mui/x-date-pickers";
+import {
+  DesktopTimePicker,
+  LocalizationProvider,
+} from "@mui/x-date-pickers";
 import { handleTwoLength } from "@/helper";
 import ClockField from "@/components/icons/ClockField";
 
diff --git a/components/contactUs/Connect.js b/components/contactUs/Connect.js
index 9456ad1..e63f70d 100644
--- a/components/contactUs/Connect.js
+++ b/components/contactUs/Connect.js
@@ -24,11 +24,7 @@ function Connect() {
               <Field isPlaceHolder={true} title="" type="text" />
             </FieldLabel>
             <FieldLabel title="شماره موبایل">
-              <Field
-                isPlaceHolder={true}
-                title="09123456789"
-                type="number"
-              />
+              <Field isPlaceHolder={true} title="09123456789" type="number" />
             </FieldLabel>
           </div>
           <div>
diff --git a/components/icons/TickAlert.js b/components/icons/TickAlert.js
new file mode 100644
index 0000000..eb5d6f3
--- /dev/null
+++ b/components/icons/TickAlert.js
@@ -0,0 +1,25 @@
+function TickAlert({ fill }) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="none"
+    >
+      <g clip-path="url(#clip0_4005_1914)">
+        <path
+          d="M16 7.99915C16 10.1209 15.1571 12.1557 13.6569 13.656C12.1566 15.1563 10.1217 15.9991 8 15.9991C5.87827 15.9991 3.84344 15.1563 2.34315 13.656C0.842855 12.1557 0 10.1209 0 7.99915C0 5.87741 0.842855 3.84258 2.34315 2.34229C3.84344 0.842 5.87827 -0.000854492 8 -0.000854492C10.1217 -0.000854492 12.1566 0.842 13.6569 2.34229C15.1571 3.84258 16 5.87741 16 7.99915ZM12.03 4.96915C11.9586 4.89796 11.8735 4.84192 11.7799 4.80436C11.6863 4.7668 11.5861 4.7485 11.4853 4.75056C11.3845 4.75261 11.2851 4.77498 11.1932 4.81631C11.1012 4.85765 11.0185 4.91711 10.95 4.99115L7.477 9.41615L5.384 7.32215C5.24183 7.18967 5.05378 7.11754 4.85948 7.12097C4.66518 7.1244 4.47979 7.20311 4.34238 7.34052C4.20497 7.47794 4.12625 7.66332 4.12283 7.85762C4.1194 8.05192 4.19152 8.23997 4.324 8.38215L6.97 11.0291C7.04128 11.1003 7.12616 11.1564 7.21958 11.194C7.313 11.2316 7.41305 11.2501 7.51375 11.2482C7.61444 11.2463 7.71374 11.2242 7.8057 11.1831C7.89766 11.1421 7.9804 11.0829 8.049 11.0091L12.041 6.01915C12.1771 5.87764 12.2523 5.68842 12.2504 5.4921C12.2485 5.29579 12.1698 5.10803 12.031 4.96915H12.03Z"
+          fill={fill}
+        />
+      </g>
+      <defs>
+        <clipPath id="clip0_4005_1914">
+          <rect width="16" height="16" fill="white" />
+        </clipPath>
+      </defs>
+    </svg>
+  );
+}
+
+export default TickAlert;
diff --git a/components/layoutPanel/header/icons/Search.js b/components/layoutPanel/header/icons/Search.js
new file mode 100644
index 0000000..562895b
--- /dev/null
+++ b/components/layoutPanel/header/icons/Search.js
@@ -0,0 +1,68 @@
+import SearchHeaderP from "@/components/icons/SearchHeaderP";
+import { Button, Popover, TextField } from "@mui/material";
+import { useState } from "react";
+
+function Search() {
+  const [anchorEl, setAnchorEl] = useState(null);
+
+  const handleClick = (event) => setAnchorEl(event.currentTarget);
+  const handleClose = () => setAnchorEl(null);
+
+  const open = Boolean(anchorEl);
+  const id = open ? "simple-popover" : undefined;
+
+  return (
+    <>
+      <Button
+        className="
+      !p-[8px] !border-[#EFEFEF] !rounded-[8px]
+      !w-[32px] md:!w-[36px] lg:!w-[40px] dark:!border-[#343645]
+      !h-[32px] md:!h-[36px] lg:!h-[40px] md:!hidden
+      !min-w-[32px] md:!min-w-[36px] lg:!min-w-[40px]
+      !min-h-[32px] md:!min-h-[36px] lg:!min-h-[40px]
+      "
+        variant="outlined"
+        onClick={handleClick}
+      >
+        <SearchHeaderP />
+      </Button>
+      <Popover
+        id={id}
+        open={open}
+        anchorEl={anchorEl}
+        onClose={handleClose}
+        anchorOrigin={{
+          vertical: "bottom",
+          horizontal: "left",
+        }}
+      >
+        <TextField
+          size="small"
+          placeholder="جستجو کنید.."
+          sx={{
+            "& .MuiFormLabel-root": {
+              top: "-4px !important",
+            },
+            "& .MuiInputBase-input": { padding: "8px" },
+            "& .MuiInputBase-root": { borderRadius: "6px !important" },
+            "& .MuiOutlinedInput-notchedOutline": {
+              border: "1px solid #E9ECEF !important",
+            },
+            ".Mui-focused": {
+              "& .MuiOutlinedInput-notchedOutline": {
+                border: "1px solid #5559CE !important",
+                transition: "0.5s all",
+              },
+            },
+            "& input::-webkit-outer-spin-button, & input::-webkit-inner-spin-button":
+              {
+                display: "none",
+              },
+          }}
+        />
+      </Popover>
+    </>
+  );
+}
+
+export default Search;
diff --git a/components/layoutPanel/header/icons/index.js b/components/layoutPanel/header/icons/index.js
index 735994f..0de1a2f 100644
--- a/components/layoutPanel/header/icons/index.js
+++ b/components/layoutPanel/header/icons/index.js
@@ -1,25 +1,14 @@
 import { Button } from "@mui/material";
 import NotificationP from "@/components/icons/NotificationP";
 import SettingP from "@/components/icons/SettingP";
-import SearchHeaderP from "@/components/icons/SearchHeaderP";
 import Theme from "./Theme";
+import Search from "./Search";
 
 function Icons() {
   return (
-    <div className="flex items-center justify-start gap-[12px]">
+    <div className="flex items-center justify-start gap-[6px]">
       <Theme />
-      <Button
-        className="
-                    !p-[8px] !border-[#EFEFEF] !rounded-[8px]
-                    !w-[32px] md:!w-[36px] lg:!w-[40px] dark:!border-[#343645]
-                    !h-[32px] md:!h-[36px] lg:!h-[40px] md:!hidden
-                    !min-w-[32px] md:!min-w-[36px] lg:!min-w-[40px]
-                    !min-h-[32px] md:!min-h-[36px] lg:!min-h-[40px]
-                "
-        variant="outlined"
-      >
-        <SearchHeaderP />
-      </Button>
+      <Search />
       <Button
         className="
                     !p-[8px] !border-[#EFEFEF] !rounded-[8px]