save state selected in modal filter, filter list with location selected, save data sort, filter list with sort point, real all url from .env file, change name of value category and specialties to persian and change functional find data with field

components/home/search/Fields.js

@@ -2,12 +2,10 @@
 
 import { useState } from "react";
 
-import { Button, TextField } from "@mui/material";
 import ModalSearchCity from "@/app/component/modalSearchCity";
-import Search from "@/components/icons/Search";
 import ButtonFilter from "@/app/component/modalSearchCity/ButtonFilter";
-import Link from "next/link";
-import SearchD from "@/components/icons/SearchD";
+import FilterText from "./FilterText";
+import RedirectLink from "./RedirectLink";
 
 function Fields({ city, state }) {
   const [open, setOpen] = useState(false);
@@ -28,66 +26,8 @@ function Fields({ city, state }) {
         <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,
-        }}
-        sx={{
-          display: "flex",
-          flexDirection: "column",
-          justifyContent: "center",
-          "& .MuiInput-root": {
-            padding: "0",
-            borderBottom: "none",
-          },
-          "& .MuiInputBase-input": {
-            color: "#6C757D",
-          },
-          "& .MuiInputBase-input": {
-            color: "#6C757D",
-            fontSize: {
-              xs: "10px !important",
-              sm: "12px !important",
-              md: "14px !important",
-              lg: "16px !important",
-            },
-          },
-        }}
-        placeholder="جستجوی نام پزشک، تخصص، بیماری ..."
-        dir="rtl"
-        className={`!shadow-none !w-full lg:!w-[524px] bg-[#FAFAFA] !text-[14px] md:!text-[16px] !rounded-0 !font-normal !text-[#6C757D]`}
-      />
-      <Link
-        href={{
-          pathname: "/doctors",
-          query: {
-            province: data.province,
-            city: data.city,
-            search: data.search,
-          },
-        }}
-      >
-        <Button className="!hidden lg:!flex !rounded-[4px] !h-[40px] sm:!h-[42px] md:!h-[45px] lg:!h-[48px] !gap-2.5 !min-w-[114px]">
-          <div className="min-w-[20px] min-h-[20px]">
-            <Search />
-          </div>
-          <p>جستجو</p>
-        </Button>
-        <Button
-          className="!flex lg:!hidden !rounded-[4px] 
-                !w-[40px] sm:!w-[42px] md:!w-[45px] lg:!w-[48px]
-                !h-[40px] sm:!h-[42px] md:!h-[45px] lg:!h-[48px] 
-                !min-w-[40px] sm:!min-w-[42px] md:!min-w-[45px] lg:!min-w-[48px]
-                !min-h-[40px] sm:!min-h-[42px] md:!min-h-[45px] lg:!min-h-[48px] 
-                !gap-2.5 !p-2.5"
-        >
-          <div className="w-[24px] h-[24px] min-w-[24px] min-h-[24px]">
-            <SearchD />
-          </div>
-        </Button>
-      </Link>
+      <FilterText data={data} setData={setData} />
+      <RedirectLink data={data} />
     </>
   );
 }

components/home/search/FilterText.js

@@ -0,0 +1,40 @@
+import React from "react";
+import {  TextField } from "@mui/material";
+
+function FilterText({ data, setData }) {
+  return (
+    <TextField
+      variant="standard"
+      onChange={(e) => setData({ ...data, search: e.target.value })}
+      InputProps={{
+        disableUnderline: true,
+      }}
+      sx={{
+        display: "flex",
+        flexDirection: "column",
+        justifyContent: "center",
+        "& .MuiInput-root": {
+          padding: "0",
+          borderBottom: "none",
+        },
+        "& .MuiInputBase-input": {
+          color: "#6C757D",
+        },
+        "& .MuiInputBase-input": {
+          color: "#6C757D",
+          fontSize: {
+            xs: "10px !important",
+            sm: "12px !important",
+            md: "14px !important",
+            lg: "16px !important",
+          },
+        },
+      }}
+      placeholder="جستجوی نام پزشک، تخصص، بیماری ..."
+      dir="rtl"
+      className={`!shadow-none !w-full lg:!w-[524px] bg-[#FAFAFA] !text-[14px] md:!text-[16px] !rounded-0 !font-normal !text-[#6C757D]`}
+    />
+  );
+}
+
+export default FilterText;

components/home/search/RedirectLink.js

@@ -0,0 +1,49 @@
+"use client";
+
+import SearchD from "@/components/icons/SearchD";
+import { Search } from "@mui/icons-material";
+import { Button } from "@mui/material";
+import { useRouter } from "next/navigation";
+
+function RedirectLink({ data }) {
+  const router = useRouter();
+
+  const handleRedirect = () => {
+    const queryParams = new URLSearchParams({
+      province: data.province || "",
+      city: data.city || "",
+      search: data.search || "",
+    }).toString();
+
+    router.push(`/doctors?${queryParams}`);
+  };
+
+  return (
+    <>
+      <Button
+        className="!hidden lg:!flex !rounded-[4px] !h-[40px] sm:!h-[42px] md:!h-[45px] lg:!h-[48px] !gap-2.5 !min-w-[114px]"
+        onClick={handleRedirect}
+      >
+        <div className="min-w-[20px] min-h-[20px]">
+          <Search />
+        </div>
+        <p>جستجو</p>
+      </Button>
+      <Button
+        onClick={handleRedirect}
+        className="!flex lg:!hidden !rounded-[4px] 
+                !w-[40px] sm:!w-[42px] md:!w-[45px] lg:!w-[48px]
+                !h-[40px] sm:!h-[42px] md:!h-[45px] lg:!h-[48px] 
+                !min-w-[40px] sm:!min-w-[42px] md:!min-w-[45px] lg:!min-w-[48px]
+                !min-h-[40px] sm:!min-h-[42px] md:!min-h-[45px] lg:!min-h-[48px] 
+                !gap-2.5 !p-2.5"
+      >
+        <div className="w-[24px] h-[24px] min-w-[24px] min-h-[24px]">
+          <SearchD />
+        </div>
+      </Button>
+    </>
+  );
+}
+
+export default RedirectLink;