respnsive pages

components/clinics/head/SearchBar.js

@@ -1,15 +1,15 @@
-import ArrowBottomD from '@/components/icons/ArrowBottomD'
-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'
+import { Button, ButtonGroup, TextField } from '@mui/material';
+import SearchD from '@/components/icons/SearchD';
+import ModalSearchCity from './modal';
 
 function SearchBar() {
     return (
         <ButtonGroup
             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)]"
+            className="
+            !bg-[#FFF] !w-2/3 !mt-[30px] !rounded-lg !overflow-hidden flex items-center 
+            !shadow-[0px_1px_24.8px_0px_rgba(204,_204,_204,_0.18)]
+            !h-fit !pl-1"
         >
             <ModalSearchCity />
             <TextField
@@ -18,22 +18,21 @@ function SearchBar() {
                     disableUnderline: true
                 }}
                 sx={{
-                    '& .MuiInputBase-root': {
-                        height: '100%'
-                    },
-                    '& .MuiInput-root': {
-                        borderBottom: 'none',
-                    },
-                    '& .MuiInputBase-input': {
-                        color: '#7E7E7E'
-                    }
+                    background: 'transparent !important',
+                    '& .MuiInputBase-input': { color: '#7E7E7E' },
+                    '& .MuiInput-root': { borderBottom: 'none' },
+                    '& .MuiInputBase-root': { height: '100%' }
                 }}
                 placeholder="جستجوی تخصص"
                 dir='rtl'
-                className={`!shadow-none !w-full !px-5 !h-full bg-[#FAFAFA] !text-[14px] md:!text-[16px] !min-w-[50%] !rounded-0 !font-normal !text-[#6C757D]`}
+                className={`!shadow-none !w-full !min-w-3 !px-5 !h-full bg-[#FAFAFA] !text-[14px] md:!text-[16px] lg:!min-w-[50%] !rounded-0 !font-normal !text-[#6C757D]`}
             />
             <Button
-                className="!rounded-[4px] !ml-1 !min-w-[56px] !min-h-[56px] !gap-2.5 !p-4"
+                className="
+                    !rounded-[4px] !gap-2.5 !p-2 md:!p-3 lg:!p-4 !min-w-fit
+                    !w-[38px] sm:!w-[44px] md:!w-[50px] lg:!w-[56px] 
+                    !h-[38px] sm:!h-[44px] md:!h-[50px] lg:!h-[56px] 
+                "
             >
                 <SearchD />
             </Button>

components/clinics/head/modal/index.js

@@ -29,20 +29,35 @@ function ModalSearchCity() {
     const handleOpen = () => setOpen(true);
     const handleClose = () => setOpen(false);
 
+    const [selected, setSelected] = useState({
+        first: '',
+        second: ''
+    });
+
+    const updateData = (event, name) =>
+        setSelected({ ...selected, [name]: event.target.innerText })
+
     return (
         <>
             {/* Button Modal */}
             <Button
-                className="!border-none !min-w-[122px] !h-[64px] !px-2 !bg-[#F8F8FF] !rounded-l-none"
+                className="
+                    !border-none !min-w-fit lg:!min-w-[122px] !bg-[#F8F8FF] !rounded-l-none
+                    !py-[15px] !px-[6px] md:!py-[17px] md:!px-[5px] lg:!py-[20px] lg:!px-[8px]
+                "
                 onClick={handleOpen}
                 variant="contained"
                 color="secondary"
             >
-                <div className="min-w-[20px] min-h-[20px]">
+                <div className="w-[16px] h-[16px] md:w-[18px] md:h-[18px] lg:w-[20px] lg:h-[20px]">
                     <SettingD />
                 </div>
-                <p className="text-[#616161] text-[16px] font-medium mx-2">فیلترها</p>
-                <div className='min-w-[24px]'>
+                <p className="text-[#616161] text-[11px] sm:text-[13px] md:text-[15px] lg:text-[16px] font-medium mx-2">
+                    {/* {selected.first && selected.second ?
+                        `${selected.first} | ${selected.second}` : 'فیلترها'} */}
+                    فیلترها
+                </p>
+                <div className='w-[16px] h-[16px] md:w-[20px] md:h-[20px] lg:w-[24px] lg:h-[24px]'>
                     <ArrowBottomD />
                 </div>
             </Button>
@@ -69,11 +84,15 @@ function ModalSearchCity() {
                         <p className="text-[#525252] mt-[32px] text-[16px] font-medium text-center">شهر یا استان مورد نظر را انتخاب نمایید:</p>
                         <div className="flex flex-col mt-[44px] mb-[56px] justify-center items-center gap-10">
                             <AutoCompleteSelect
-                                list={states}
+                                updateData={updateData}
                                 label='استان'
+                                list={states}
+                                name='first'
                             />
                             <AutoCompleteSelect
+                                updateData={updateData}
                                 list={cities}
+                                name='second'
                                 label='شهر'
                             />
                         </div>