add modal filter & responsive head doctors & buttons

2024-08-17 20:32:07 +03:30
parent d3f967ca67
commit cd3b783abd
11 changed files with 168 additions and 37 deletions
@@ -0,0 +1,22 @@
+import AutoCompleteSelect from "@/app/component/element/AutoCompleteSelect";
+import Radios from "./Radios";
+
+const specialties = ['چشم پزشکی', 'چشم پزشکی', 'چشم پزشکی', 'چشم پزشکی', 'چشم پزشکی'];
+const group1 = ['خانم', 'آقا', 'هر دو'];
+
+function Content() {
+    return (
+        <div className="mt-[50px] px-[38px] mb-[32px]">
+            <AutoCompleteSelect
+                list={specialties}
+                label='تخصص'
+            />
+            <div>
+                <p className="text-[16px] font-medium text-[#3B3B3B]">جنسیت پزشک</p>
+                <Radios group={group1} />
+            </div>
+        </div>
+    )
+}
+
+export default Content
@@ -0,0 +1,51 @@
+'use client';
+
+import CloseOrangeModal from "@/components/icons/CloseOrangeModal";
+import { styleDefault } from "@/mui";
+import { Button, Modal } from "@mui/material";
+import { useState } from "react";
+import Content from "./Content";
+
+function FilterModal({ children }) {
+
+    const [open, setOpen] = useState(true);
+    const handleOpen = () => setOpen(true);
+    const handleClose = () => setOpen(false);
+
+    return (
+        <>
+            {/* Button Modal */}
+            <div onClick={handleOpen}>
+                {children}
+            </div>
+
+            {/* Content Modal */}
+            <Modal
+                open={open}
+                onClose={handleClose}
+            >
+                <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)]"
+                >
+                    <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"
+                        >
+                            <CloseOrangeModal />
+                            <p className="text-[#F17732] text-[14px] font-normal">حذف همه</p>
+                        </Button>
+                    </div>
+                    <Content />
+                </div>
+            </Modal>
+        </>
+    )
+}
+
+export default FilterModal
@@ -0,0 +1,13 @@
+import { FormControlLabel, Radio, RadioGroup } from "@mui/material"
+
+function Radios({ group }) {
+    return (
+        <RadioGroup>
+            {group.map((item, idx) => (
+                <FormControlLabel value={idx} control={<Radio />} label={item} />
+            ))}
+        </RadioGroup>
+    )
+}
+
+export default Radios