handle pagination in clinics page & change design login & fix bug filter state & change list most searched in home page & handle error page doctor item & change key url doctors and home page and get data from url & send data with url search to doctors page & show pagination only when list is long

components/doctor/detailDoctor/cards/comments/chart/index.js

@@ -54,13 +54,12 @@ function Chart({ doctor, loading }) {
       </div>
       <div className="flex flex-wrap items-center justify-center gap-[50px]">
         <ul
-          className={`flex w-full flex-col items-start justify-start gap-1.5 ${
-            loading ? "lg:w-full" : "lg:w-fit"
-          }`}
+          className={`flex w-full flex-col items-start justify-start gap-1.5 ${loading ? "lg:w-full" : "lg:w-fit"
+            }`}
         >
           {doctor.progress_detail.map((item, idx) => (
-            <TextLoading width="full" height={20} loading={loading}>
-              <ProgressDetail data={item} key={idx} />
+            <TextLoading width="full" key={idx} height={20} loading={loading}>
+              <ProgressDetail data={item} />
             </TextLoading>
           ))}
         </ul>

components/doctor/detailDoctor/cards/locations/index.js

@@ -9,9 +9,9 @@ function Locations({ doctor, loading }) {
       </p>
       <ul className="flex w-full mt-[24px] flex-col justify-center items-start">
         {doctor.locations.map((item, idx) => (
-          <CustomLoading loading={loading} width="full" height={40}>
+          <CustomLoading key={idx} loading={loading} width="full" height={40}>
             <li className="w-full">
-              <Item key={idx} data={item} />
+              <Item data={item} />
               {doctor.locations.length > idx + 1 && (
                 <span className="w-full h-px bg-[#EFEFEF] block my-[12px] md:my-[14px] lg:my-[16px]"></span>
               )}