change text location all page

components/clinics/head/SearchBar.js

@@ -1,8 +1,18 @@
+"use client";
+
 import { Button, ButtonGroup, TextField } from "@mui/material";
 import SearchD from "@/components/icons/SearchD";
-import ModalSearchCity from "./modal";
+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: "",
+  });
+  const [open, setOpen] = useState(false);
+
   return (
     <ButtonGroup
       variant="contained"
@@ -11,7 +21,14 @@ function SearchBar() {
             !shadow-[0px_1px_24.8px_0px_rgba(204,_204,_204,_0.18)]
             !h-fit !pl-1"
     >
-      <ModalSearchCity />
+      <ModalSearchCity
+        open={open}
+        setOpen={setOpen}
+        selected={selected}
+        setSelected={setSelected}
+      >
+        <ButtonFilter setOpen={setOpen} selected={selected} />
+      </ModalSearchCity>
       <TextField
         variant="standard"
         InputProps={{

components/clinics/list/index.js

@@ -2,9 +2,11 @@ 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 listPage = ["کلینیک ها", "اهواز"];
+  const { isProvinceInclude } = useProvince();
+  const listPage = ["کلینیک ها", isProvinceInclude?.name || ""];
 
   return (
     <div className="padding-responsive pt-[20px]">