change responsive page doctors & change modal and responsive & responsive page doctor item

components/doctors/index.js

@@ -1,9 +1,21 @@
-import LocationD from "../icons/LocationD";
-import ListDoctors from "./listDoctors";
+'use client';
+
+import { useState } from "react";
 import SearchBar from "./search";
 import SortList from "./sortlist";
+import ListDoctors from "./listDoctors";
+
+import LocationD from "../icons/LocationD";
 
 function DoctorsPage() {
+
+    const [data, setData] = useState({
+        expertise: '',
+        gender: 0,
+        degree: 0,
+        turn: true
+    });
+
     return (
         <div className="pt-[120px] padding-responsive">
             <div className="flex justify-center gap-[16px] sm:gap-[19px] md:gap-[22px] lg:gap-[24px] flex-col items-center mt-[90px]">
@@ -12,8 +24,8 @@ function DoctorsPage() {
                     <p className="text-[#525252] text-[16px] font-semibold">خوزستان / اهواز</p>
                 </div>
                 <div className="flex flex-col lg:flex-row items-start lg:items-center justify-center gap-[24px] lg:gap-[32px] w-full">
-                    <SearchBar />
-                    <SortList />
+                    <SearchBar data={data} setData={setData} />
+                    <SortList data={data} setData={setData} />
                 </div>
             </div>
             <ListDoctors />