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 />

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

components/doctors/search/index.js

@@ -4,7 +4,7 @@ import ArrowBottomD from "@/components/icons/ArrowBottomD";
 import SearchD from "@/components/icons/SearchD";
 import FilterModal from "../modal/FilterModal";
 
-function SearchBar() {
+function SearchBar({ data, setData }) {
     return (
         <ButtonGroup
             variant="contained"
@@ -12,7 +12,7 @@ function SearchBar() {
             flex items-center !shadow-[0px_1px_24.8px_0px_rgba(204,_204,_204,_0.18)]
             !h-[44px] sm:!h-[50px] md:!h-[57px] lg:!h-[64px]"
         >
-            <FilterModal>
+            <FilterModal data={data} setData={setData}>
                 <Button
                     className="!border-none !hidden lg:!flex !max-h-full !min-w-fit !h-[64px] !px-2 !bg-[#F8F8FF] !rounded-l-none"
                     variant="contained"

components/doctors/sortlist/SelectSort.js

@@ -3,6 +3,8 @@ import { useState } from "react";
 import ArrowBottomD from "../../icons/ArrowBottomD";
 import SortD from "../../icons/SortD";
 
+const listSort = ['براساس امتیاز 1', 'براساس امتیاز 2', 'براساس امتیاز 3'];
+
 function SelectSort() {
 
     const [age, setAge] = useState('');
@@ -19,7 +21,7 @@ function SelectSort() {
             className="!w-[193px] !max-w-[305px] lg:!w-full text-[14px] md:text-[16px] !bg-[#FFF] !h-[44px] sm:!h-[50px] md:!h-[57px] lg:!h-[64px]"
             renderValue={(value) => {
                 return (
-                    <div className="w-[20px] gap-[4px] md:gap-[8px] md:w-[22px] lg:w-[24px] h-[20px] md:h-[22px] lg:h-[24px]">
+                    <div className="w-[20px] flex gap-[4px] md:gap-[8px] md:w-[22px] lg:w-[24px] h-[20px] md:h-[22px] lg:h-[24px]">
                         <SvgIcon color="primary">
                             <SortD />
                         </SvgIcon>
@@ -41,9 +43,19 @@ function SelectSort() {
                 }
             }}
         >
-            <MenuItem value='براساس امتیاز 1'>براساس امتیاز 1</MenuItem>
-            <MenuItem value='براساس امتیاز 2'>براساس امتیاز 2</MenuItem>
-            <MenuItem value='براساس امتیاز 3'>براساس امتیاز 3</MenuItem>
+            {listSort.map((item, idx) => (
+                <div key={idx} className="flex flex-col items-start w-full">
+                    <MenuItem
+                        value={item}
+                        className="!p-2 !mr-2 !w-[calc(100%_-_16px)]"
+                    >
+                        {item}
+                    </MenuItem>
+                    {listSort.length > idx + 1 && (
+                        <span className="block mr-2 w-[calc(100%_-_16px)] h-px bg-[#EFEFEF]"></span>
+                    )}
+                </div>
+            ))}
         </Select>
     )
 }

components/doctors/sortlist/index.js

@@ -1,12 +1,15 @@
 'use client';
 
+import FilterModal from "../modal/FilterModal";
 import FilterBtn from "./FilterBtn";
 import SelectSort from "./SelectSort";
 
-function SortList() {
+function SortList({ data, setData }) {
     return (
         <div className="flex items-center lg:!w-[25%] gap-[20px] lg:gap-0">
-            <FilterBtn />
+            <FilterModal data={data} setData={setData}>
+                <FilterBtn />
+            </FilterModal>
             <SelectSort />
         </div>
     )