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

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>
   );
 }