page home responsive & change component element & page blog item

components/home/search/modal/index.js

@@ -18,15 +18,23 @@ function ModalSearchCity() {
     ];
 
     const cities = [
-        { label: 'شهر یک', id: 10 },
-        { label: 'شهر دو', id: 20 },
-        { label: 'شهر سه', id: 30 }
+        { label: 'پردیس', id: 10 },
+        { label: 'دماوند', id: 20 },
+        { label: 'فیروزکوه', id: 30 }
     ];
 
     const [open, setOpen] = useState(false);
     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 */}
@@ -39,7 +47,10 @@ function ModalSearchCity() {
                 <div className="min-w-[20px] min-h-[20px] hidden md:flex">
                     <Location />
                 </div>
-                <p className="text-[#616161] text-[16px] leading-[17px] sm:leading-[19px] md:leading-[22px] lg:leading-[24px] font-medium ml-1 md:mx-1">انتخاب شهر</p>
+                <p className="text-[#616161] text-[16px] leading-[17px] sm:leading-[19px] md:leading-[22px] lg:leading-[24px] font-medium ml-1 md:mx-1">
+                    {selected.first && selected.second ?
+                        `${selected.first} | ${selected.second}` : 'انتخاب شهر'}
+                </p>
                 <div className="w-[16px] h-[16px] md:w-[18px] md:h-[18px] lg:w-[20px] lg:h-[20px] grid place-items-center">
                     <ArrowBottomH />
                 </div>
@@ -61,11 +72,15 @@ function ModalSearchCity() {
                         <p className="text-[#525252] mt-[38px] md:mt-4 text-[16px] font-medium text-center">شهر یا استان مورد نظر را انتخاب نمایید:</p>
                         <div className="flex flex-col mt-[52px] md:mt-[44px] mb-14 justify-center items-center gap-10">
                             <AutoCompleteSelect
+                                updateData={updateData}
                                 list={states}
                                 label='استان'
+                                name='first'
                             />
                             <AutoCompleteSelect
+                                updateData={updateData}
                                 list={cities}
+                                name='second'
                                 label='شهر'
                             />
                         </div>