basic design page doctors

app/doctors/page.js

@@ -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

@@ -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

@@ -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

@@ -5,41 +5,41 @@ 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>
+            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>
     )
 }
 

components/icons/LocationD.js

@@ -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