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

components/doctors/modal/Content.js

@@ -1,19 +1,50 @@
 import AutoCompleteSelect from "@/app/component/element/AutoCompleteSelect";
-import Radios from "./Radios";
+import RadioContent from "./RadioContent";
+import { Button, Switch } from "@mui/material";
 
-const specialties = ['چشم پزشکی', 'چشم پزشکی', 'چشم پزشکی', 'چشم پزشکی', 'چشم پزشکی'];
+const specialties = ['چشم پزشکی1', 'چشم پزشکی2', 'چشم پزشکی3', 'چشم پزشکی4', 'چشم پزشکی5'];
 const group1 = ['خانم', 'آقا', 'هر دو'];
+const group2 = ['فوق تخصص', 'دکترای تخصصی', 'متخصص', 'دکتری'];
+
+const label = { inputProps: { 'aria-label': 'Switch demo' } };
+
+function Content({ data, setData }) {
+
+    const changeData = (value, name) => {
+        setData({ ...data, [name]: value })
+    };
 
-function Content() {
     return (
         <div className="mt-[50px] px-[38px] mb-[32px]">
             <AutoCompleteSelect
+                updateData={(event) => changeData(event.target.innerText, 'expertise')}
                 list={specialties}
+                name='expertise'
                 label='تخصص'
             />
-            <div>
-                <p className="text-[16px] font-medium text-[#3B3B3B]">جنسیت پزشک</p>
-                <Radios group={group1} />
+            <div className="mt-[40px] mb-[32px]">
+                <RadioContent
+                    changeData={(value) => changeData(+value, 'gender')}
+                    value={data.gender}
+                    text='جنسیت پزشک'
+                    group={group1}
+
+                />
+                <span className="block mt-[16px] mb-[24px] w-full h-px bg-[#EFEFEF]"></span>
+                <RadioContent
+                    changeData={(value) => changeData(+value, 'degree')}
+                    value={data.degree}
+                    text='درجه علمی'
+                    group={group2}
+                />
+                <span className="block mt-[16px] mb-[24px] w-full h-px bg-[#EFEFEF]"></span>
+                <div className="flex items-center justify-start gap-[12px]">
+                    <p className="text-[#3B3B3B] text-[16px] font-medium">فقط پزشکان دارای نوبت</p>
+                    <Switch
+                        {...label}
+                        onChange={event => changeData(event.target.checked, 'turn')}
+                    />
+                </div>
             </div>
         </div>
     )

components/doctors/modal/FilterModal.js

@@ -6,9 +6,9 @@ import { Button, Modal } from "@mui/material";
 import { useState } from "react";
 import Content from "./Content";
 
-function FilterModal({ children }) {
+function FilterModal({ data, setData, children }) {
 
-    const [open, setOpen] = useState(true);
+    const [open, setOpen] = useState(false);
     const handleOpen = () => setOpen(true);
     const handleClose = () => setOpen(false);
 
@@ -26,22 +26,34 @@ function FilterModal({ children }) {
             >
                 <div
                     style={styleDefault}
-                    className="!px-[32px] !py-[24px] !bg-[#FFF] !rounded-[8px] !overflow-hidden !shadow-[0px_1px_24.8px_0px_rgba(204,_204,_204,_0.18)]"
+                    className="!px-[32px] !py-[24px] !bg-[#FFF] !rounded-[8px] !overflow-hidden !shadow-[0px_1px_24.8px_0px_rgba(204,_204,_204,_0.18)]
+                    !w-full md:!w-fit !h-full md:!h-fit !flex !flex-col !justify-between"
                 >
-                    <div
-                        className="flex justify-between w-full"
-                    >
-                        <p className="text-[#3B3B3B] text-[20px] font-bold">فیلترها</p>
-                        <Button
-                            className="cursor-pointer !p-0 flex items-center justify-center gap-1"
-                            onClick={handleClose}
-                            variant="text"
+                    <div>
+                        <div
+                            className="flex justify-between w-full"
                         >
-                            <CloseOrangeModal />
-                            <p className="text-[#F17732] text-[14px] font-normal">حذف همه</p>
+                            <p className="text-[#3B3B3B] text-[20px] font-bold">فیلترها</p>
+                            <Button
+                                className="cursor-pointer !p-0 flex items-center justify-center gap-1"
+                                onClick={handleClose}
+                                variant="text"
+                            >
+                                <CloseOrangeModal />
+                                <p className="text-[#F17732] text-[14px] font-normal">حذف همه</p>
+                            </Button>
+                        </div>
+                        <Content data={data} setData={setData} />
+                    </div>
+                    <div className="flex justify-end w-full">
+                        <Button
+                            className="!px-3 !py-2 !text-[16px] !font-medium"
+                            onClick={handleClose}
+                            variant="contained"
+                        >
+                            اعمال تغییرات
                         </Button>
                     </div>
-                    <Content />
                 </div>
             </Modal>
         </>

components/doctors/modal/RadioContent.js

@@ -0,0 +1,16 @@
+import Radios from "./Radios"
+
+function RadioContent({ group, text, value, changeData }) {
+    return (
+        <div>
+            <p className="text-[16px] font-medium text-[#3B3B3B]">{text}</p>
+            <Radios
+                changeData={changeData}
+                group={group}
+                value={value}
+            />
+        </div>
+    )
+}
+
+export default RadioContent

components/doctors/modal/Radios.js

@@ -1,10 +1,27 @@
 import { FormControlLabel, Radio, RadioGroup } from "@mui/material"
 
-function Radios({ group }) {
+function Radios({ group, value, changeData }) {
     return (
-        <RadioGroup>
+        <RadioGroup
+            value={value}
+            onChange={e => changeData(e.target.value)}
+            sx={{
+                '& .MuiFormControlLabel-root': {
+                    marginRight: '0 !important',
+                    transform: 'translateX(9px)'
+                }
+            }}
+        >
             {group.map((item, idx) => (
-                <FormControlLabel value={idx} control={<Radio />} label={item} />
+                <FormControlLabel
+                    control={
+                        <Radio
+                            className="!ml-2" />
+                    }
+                    label={item}
+                    value={idx}
+                    key={idx}
+                />
             ))}
         </RadioGroup>
     )