popover search bar header

2024-10-25 03:42:25 +03:30
parent 50c7386247
commit 2a043e5932
6 changed files with 103 additions and 20 deletions
@@ -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;