respnsive pages

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>