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

basic design page doctors

Browse Source
This commit is contained in:
Ehsan
2024-06-24 04:30:26 +03:30
parent 4fbef73d00
commit b03fbc0093
5 changed files with 125 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/doctors/page.js
+12
View File
@@ -0,0 +1,12 @@
import DoctorsPage from '@/components/doctors';
import Layout from '@/components/layout';
function index() {
return (
<Layout title='دکتر ها'>
<DoctorsPage />
</Layout>
)
}
export default index
components/doctors/index.js
+22
View File
@@ -0,0 +1,22 @@
import { Button } from "@mui/material"
import LocationD from "../icons/LocationD"
import SearchBar from "./search"
function DoctorsPage() {
return (
<div className="pt-[120px] padding-responsive">
<div className="flex justify-center gap-[24px] flex-col items-center mt-[90px]">
<div className="flex items-center justify-start gap-2 w-full">
<LocationD />
<p className="text-[#525252] text-[16px] font-semibold">خوزستان / اهواز</p>
</div>
<div className="flex items-center justify-center gap-[32px]">
<SearchBar />
<Button>تست</Button>
</div>
</div>
</div>
)
}
export default DoctorsPage
components/doctors/search/index.js
+46
View File
@@ -0,0 +1,46 @@
import Search from "@/components/icons/Search";
import Location from "@/components/icons/Location";
import { Button, ButtonGroup, TextField } from "@mui/material";
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)]"
>
<Button className="!border-none" color="secondary" variant="contained">
<div className="min-w-[20px] min-h-[20px]">
<Location />
</div>
<p className="text-[#616161] text-[16px] font-medium mr-1">انتخاب شهر</p>
</Button>
<span className="black w-px h-12 bg-[#EFEFEF]"></span>
<TextField
variant="standard"
InputProps={{
disableUnderline: true
}}
sx={{
'& .MuiInput-root': {
padding: '9px 0',
borderBottom: 'none',
},
'& .MuiInputBase-input': {
color: '#6C757D'
}
}}
placeholder="جستجوی نام پزشک، تخصص، بیماری ..."
dir='rtl'
className={`!shadow-none !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>
</ButtonGroup>
)
}
export default SearchBar
components/home/search/index.js
+35 -35
View File
@@ -5,41 +5,41 @@ import { Button, ButtonGroup, TextField } from "@mui/material";
function SearchBar() { function SearchBar() {
return ( return (
<ButtonGroup <ButtonGroup
variant="contained" variant="contained"
className="!py-3 !pl-4 !gap-3 !bg-[#FAFAFA] !shadow-[0px_1px_24.8px_0px_rgba(204,_204,_204,_0.18)]" className="!py-3 !pl-4 !gap-3 !bg-[#FAFAFA] !shadow-[0px_1px_24.8px_0px_rgba(204,_204,_204,_0.18)]"
> >
<Button className="!border-none" color="secondary" variant="contained"> <Button className="!border-none" color="secondary" variant="contained">
<div className="min-w-[20px] min-h-[20px]"> <div className="min-w-[20px] min-h-[20px]">
<Location /> <Location />
</div> </div>
<p className="text-[#616161] text-[16px] font-medium mr-1">انتخاب شهر</p> <p className="text-[#616161] text-[16px] font-medium mr-1">انتخاب شهر</p>
</Button> </Button>
<span className="black w-px h-12 bg-[#EFEFEF]"></span> <span className="black w-px h-12 bg-[#EFEFEF]"></span>
<TextField <TextField
variant="standard" variant="standard"
InputProps={{ InputProps={{
disableUnderline: true disableUnderline: true
}} }}
sx={{ sx={{
'& .MuiInput-root': { '& .MuiInput-root': {
padding: '9px 0', padding: '9px 0',
borderBottom: 'none', borderBottom: 'none',
}, },
'& .MuiInputBase-input': { '& .MuiInputBase-input': {
color: '#6C757D' color: '#6C757D'
} }
}} }}
placeholder="جستجوی نام پزشک، تخصص، بیماری ..." placeholder="جستجوی نام پزشک، تخصص، بیماری ..."
dir='rtl' 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 !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"> <Button className="!rounded-[4px] !gap-2.5">
<div className="min-w-[20px] min-h-[20px]"> <div className="min-w-[20px] min-h-[20px]">
<Search /> <Search />
</div> </div>
<p>جستجو</p> <p>جستجو</p>
</Button> </Button>
</ButtonGroup> </ButtonGroup>
) )
} }
components/icons/LocationD.js
+10
View File
@@ -0,0 +1,10 @@
function LocationD() {
return (
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
<path d="M11.9999 13.43C13.723 13.43 15.1199 12.0331 15.1199 10.31C15.1199 8.58687 13.723 7.19 11.9999 7.19C10.2768 7.19 8.87988 8.58687 8.87988 10.31C8.87988 12.0331 10.2768 13.43 11.9999 13.43Z" stroke="#525252" stroke-width="1.5" />
<path d="M3.61971 8.49C5.58971 -0.169998 18.4197 -0.159997 20.3797 8.5C21.5297 13.58 18.3697 17.88 15.5997 20.54C13.5897 22.48 10.4097 22.48 8.38971 20.54C5.62971 17.88 2.46971 13.57 3.61971 8.49Z" stroke="#525252" stroke-width="1.5" />
</svg>
)
}
export default LocationD