page home responsive & change component element & page blog item

components/home/index.js

@@ -11,7 +11,7 @@ function HomePage() {
             <div className="padding-responsive min-h-screen pt-[120px] flex items-center justify-center flex-col gap-[64px]">
                 <div>
                     <p
-                        className="text-[#D15B56] text-center font-kalame text-[20px] sm:text-[24px] md:text-[28px] lg:text-[32px] font-bold"
+                        className="text-[#F17732] text-center font-kalame text-[20px] sm:text-[24px] md:text-[28px] lg:text-[32px] font-bold"
                     >نوبت ۷۲۴</p>
                     <p
                         className="text-[#525252] text-center mt-2.5 font-kalame text-[20px] sm:text-[25px] md:text-[31px] lg:text-[36px] 

components/home/search/index.js

@@ -10,7 +10,7 @@ function SearchBar() {
             className="
             !py-[4px] sm:!py-[7px] md:!py-[10px] lg:!py-[12px] !gap-3
             !px-[4px] sm:!px-[8px] md:!px-[12px] lg:!px-[16px]   
-            !bg-[#FAFAFA] !shadow-[0px_1px_24.8px_0px_rgba(204,_204,_204,_0.18)] w-full lg:w-fit
+            !bg-[#FAFAFA] !transition-all !duration-500 !shadow-[0px_1px_24.8px_0px_rgba(204,_204,_204,_0.18)] w-full lg:w-fit
             "
         >
             <ModalSearchCity />

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>