popover search bar header
This commit is contained in:
Ehsan
@@ -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"}
|
||||
|
||||
@@ -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";
|
||||
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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;
|
||||
@@ -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;
|
||||
@@ -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]
|
||||
|
||||
Reference in New Issue
Block a user