page clinics & page clinic item head and tabs about

components/clinics/head/SearchBar.js

@@ -3,6 +3,7 @@ import SearchD from '@/components/icons/SearchD'
 import SettingD from '@/components/icons/SettingD'
 import { Button, ButtonGroup, TextField } from '@mui/material'
 import React from 'react'
+import ModalSearchCity from './modal'
 
 function SearchBar() {
     return (
@@ -10,19 +11,7 @@ function SearchBar() {
             variant="contained"
             className="!bg-[#FFF] !w-2/3 !mt-[30px] !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 !min-w-[122px] !h-[64px] !px-2 !bg-[#F8F8FF] !rounded-l-none"
-                variant="contained"
-                color="secondary"
-            >
-                <div className="min-w-[20px] min-h-[20px]">
-                    <SettingD />
-                </div>
-                <p className="text-[#616161] text-[16px] font-medium mx-2">فیلترها</p>
-                <div className='min-w-[24px]'>
-                    <ArrowBottomD />
-                </div>
-            </Button>
+            <ModalSearchCity />
             <TextField
                 variant="standard"
                 InputProps={{