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/home/FrequentSearches.js

@@ -1,20 +1,27 @@
 import { frequentSearches } from "@/constans";
+import { filterList } from "@/helper";
 import { Button } from "@mui/material";
+import specialties from "@/data/specialties.json";
 import Link from "next/link";
 
 function FrequentSearches() {
+  const childrenList = specialties.filter(item => item.parent);
+  console.log(childrenList);
+
+
   return (
-    <div className="flex items-center justify-center gap-[8px] sm:gap-[10px] md:gap-[13px] lg:gap-[16px] w-full lg:w-fit">
+    <div className="flex items-center justify-center gap-[8px] sm:gap-[10px] md:gap-[13px] lg:gap-[16px] w-full">
       <p className="text-[#3B3B3B] text-[14px] md:text-[16px] font-normal text-nowrap">
         جستجوهای پر تکرار:
       </p>
-      <div className="overflow-auto hidden-scroll flex justify-start">
+      <div className="overflow-auto hidden-scroll flex justify-start max-w-[620px]">
         <ul className="flex items-center justify-start gap-[14px] pl-[14px]">
-          {frequentSearches.map((item, idx) => (
+          {childrenList.map((item, idx) => (
             <Link href={{
               pathname: "/doctors",
               query: {
-                search: item
+                category: item.parent,
+                specialties: item.id,
               },
             }}>
               <li key={idx}>
@@ -24,7 +31,7 @@ function FrequentSearches() {
                   className="!py-[6px] md:!py-[7px] lg:!py-[8px] !px-[12px] sm:!px-[14px] md:!px-[15px] lg:!px-[16px] !text-[12px] lg:!text-[14px] 
                 !rounded-[4px] !shadow-none !font-normal !border !border-solid !border-[#D7D7D7] hover:!bg-[#EFEFEF]"
                 >
-                  {item}
+                  {item.name}
                 </Button>
               </li>
             </Link>

components/home/search/Fields.js

@@ -11,7 +11,7 @@ import SearchD from "@/components/icons/SearchD";
 
 function Fields({ city, state }) {
     const [open, setOpen] = useState(false);
-    const [selected, setSelected] = useState({
+    const [data, setData] = useState({
         province: state?.name || '',
         city: city?.name || '',
     });
@@ -21,15 +21,16 @@ function Fields({ city, state }) {
             <ModalSearchCity
                 open={open}
                 state={state}
+                selected={data}
                 setOpen={setOpen}
-                selected={selected}
-                setSelected={setSelected}
+                setSelected={setData}
             >
-                <ButtonFilter setOpen={setOpen} selected={selected} />
+                <ButtonFilter setOpen={setOpen} selected={data} />
             </ModalSearchCity>
             <span className="black w-px bg-[#EFEFEF]"></span>
             <TextField
                 variant="standard"
+                onChange={e => setData({ ...data, search: e.target.value })}
                 InputProps={{
                     disableUnderline: true,
                 }}
@@ -62,8 +63,9 @@ function Fields({ city, state }) {
                 href={{
                     pathname: "/doctors",
                     query: {
-                        province: selected.province,
-                        city: selected.city,
+                        province: data.province,
+                        city: data.city,
+                        search: data.search
                     },
                 }}
             >