modal search and default valud of province and city and handle search && show searched state in clinics page

components/clinics/list/index.js

@@ -1,24 +1,27 @@
 import Pageguide from "@/app/component/Pageguide";
-import clinics from "@/data/clinics.json";
 import ItemClinic from "./ItemClinic";
 import Pagination from "@/app/component/Pagination";
-import { useProvince } from "@/context/ProvinceProvider";
 
-function List({ loading }) {
-  const { isProvinceInclude } = useProvince();
-  const listPage = ["کلینیک ها", isProvinceInclude?.name || ""];
+function List({ loading, selected, clinics }) {
+  const listPage = ["کلینیک ها", selected?.city || ""];
 
   return (
     <div className="padding-responsive pt-[20px]">
       <Pageguide list={listPage} />
-      <ul
-        className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-x-[24px] 
+      {clinics.length === 0 ? (
+        <div className="text-center py-10 text-gray-500">
+          کلینیکی با این عنوان یافت نشد!
+        </div>
+      ) : (
+        <ul
+          className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-x-[24px] 
             gap-y-[16px] sm:gap-y-[24px] md:gap-y-[32px] lg:gap-y-[40px] mt-6"
-      >
-        {clinics.map((item) => (
-          <ItemClinic data={item} key={item.id} loading={loading} />
-        ))}
-      </ul>
+        >
+          {clinics.map((item) => (
+            <ItemClinic data={item} key={item.id} loading={loading} />
+          ))}
+        </ul>
+      )}
       <div className="mt-[48px] flex justify-center">
         <Pagination />
       </div>