hamed/nobat724_front
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

design box filter and search

Browse Source
This commit is contained in:
Ehsan
2024-06-25 11:38:05 +03:30
parent 4c0d308302
commit 791e7c223a
4 changed files with 54 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/doctors/search/index.js
+19 -14
View File
@@ -1,43 +1,48 @@
import Search from "@/components/icons/Search";
import Location from "@/components/icons/Location";
import { Button, ButtonGroup, TextField } from "@mui/material";
import SettingD from "@/components/icons/SettingD";
import ArrowBottomD from "@/components/icons/ArrowBottomD";
import SearchD from "@/components/icons/SearchD";
function SearchBar() {
return (
<ButtonGroup
variant="contained"
className="!py-3 !pl-4 !gap-3 !bg-[#FAFAFA] !shadow-[0px_1px_24.8px_0px_rgba(204,_204,_204,_0.18)]"
className="!bg-[#FFF] !rounded-lg !overflow-hidden flex items-center !h-[64px] !shadow-[0px_1px_24.8px_0px_rgba(204,_204,_204,_0.18)]"
>
<Button className="!border-none" color="secondary" variant="contained">
<Button
className="!border-none !h-[64px] !px-2 !bg-[#F8F8FF]"
variant="contained"
color="secondary"
>
<div className="min-w-[20px] min-h-[20px]">
<Location />
<SettingD />
</div>
<p className="text-[#616161] text-[16px] font-medium mr-1">انتخاب شهر</p>
<p className="text-[#616161] text-[16px] font-medium mx-2">فیلترها</p>
<ArrowBottomD />
</Button>
<span className="black w-px h-12 bg-[#EFEFEF]"></span>
<TextField
variant="standard"
InputProps={{
disableUnderline: true
}}
sx={{
'& .MuiInputBase-root': {
height: '100%'
},
'& .MuiInput-root': {
padding: '9px 0',
borderBottom: 'none',
},
'& .MuiInputBase-input': {
color: '#6C757D'
color: '#7E7E7E'
}
}}
placeholder="جستجوی نام پزشک، تخصص، بیماری ..."
dir='rtl'
className={`!shadow-none !w-[524px] bg-[#FAFAFA] !text-[14px] md:!text-[16px] !min-w-[50%] !rounded-0 !font-normal !text-[#6C757D]`}
className={`!shadow-none !px-5 !h-full !w-[524px] bg-[#FAFAFA] !text-[14px] md:!text-[16px] !min-w-[50%] !rounded-0 !font-normal !text-[#6C757D]`}
/>
<Button className="!rounded-[4px] !gap-2.5">
<div className="min-w-[20px] min-h-[20px]">
<Search />
</div>
<p>جستجو</p>
<Button className="!rounded-[4px] !ml-1 !w-[56px] !h-[56px] !gap-2.5 !p-4">
<SearchD />
</Button>
</ButtonGroup>
)