69 lines
1.9 KiB
JavaScript
69 lines
1.9 KiB
JavaScript
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;
|