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

components/clinics/head/SearchBar.js

@@ -1,4 +1,3 @@
-"use client";
 
 import { Button, ButtonGroup, TextField } from "@mui/material";
 import SearchD from "@/components/icons/SearchD";
@@ -6,11 +5,7 @@ import ModalSearchCity from "@/app/component/modalSearchCity";
 import { useState } from "react";
 import ButtonFilter from "@/app/component/modalSearchCity/ButtonFilter";
 
-function SearchBar() {
-  const [selected, setSelected] = useState({
-    province: "",
-    city: "",
-  });
+function SearchBar({ selected, setSelected, state, handleSearch }) {
   const [open, setOpen] = useState(false);
 
   return (
@@ -23,6 +18,7 @@ function SearchBar() {
     >
       <ModalSearchCity
         open={open}
+        state={state}
         setOpen={setOpen}
         selected={selected}
         setSelected={setSelected}
@@ -31,6 +27,7 @@ function SearchBar() {
       </ModalSearchCity>
       <TextField
         variant="standard"
+        onChange={e => handleSearch(e.target.value)}
         InputProps={{
           disableUnderline: true,
         }}

components/clinics/index.js

@@ -3,11 +3,19 @@
 import { useEffect, useState } from "react";
 
 import List from "./list";
+import { searchOnList } from "@/helper";
 import SearchBar from "./head/SearchBar";
+import clinics from "@/data/clinics.json";
 import HeadPageList from "@/app/component/head";
 
-function ClinicsPage() {
+function ClinicsPage({ matchedCity, matchedState }) {
   const [loading, setLoading] = useState(true);
+  const [filteredClinics, setFilteredClinics] = useState(clinics)
+
+  const [selected, setSelected] = useState({
+    province: matchedState?.name || "",
+    city: matchedCity?.name || "",
+  });
 
   useEffect(() => {
     setTimeout(() => {
@@ -15,15 +23,26 @@ function ClinicsPage() {
     }, 2000);
   }, []);
 
+  const handleSearch = text => {
+    setFilteredClinics(
+      searchOnList(clinics, text, 'title')
+    );
+  }
+
   return (
     <div>
       <HeadPageList
         title="لیست کلینیک ها و درمانگاه های تخصصی"
         detail="در قسمت زیر می توانید کلینیک مورد نظر خود را جستجو نمایید"
       >
-        <SearchBar />
+        <SearchBar
+          selected={selected}
+          setSelected={setSelected}
+          state={matchedState?.name}
+          handleSearch={handleSearch}
+        />
       </HeadPageList>
-      <List loading={loading} />
+      <List loading={loading} selected={selected} clinics={filteredClinics} />
     </div>
   );
 }

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>