design and responsive page doctor and account

2024-08-30 11:59:53 +03:30
parent 707206450c
commit 451ae76cb1
15 changed files with 251 additions and 42 deletions
@@ -0,0 +1,40 @@
+import CloseModalD from '@/components/icons/CloseModalD'
+import Image from 'next/image'
+
+const maps = [
+    { src: '/assets/images/snapp.png', name: 'snapp' },
+    { src: '/assets/images/tapsi.png', name: 'tapsi' },
+    { src: '/assets/images/maps.png', name: 'maps' },
+    { src: '/assets/images/balad.png', name: 'balad' },
+    { src: '/assets/images/waze.png', name: 'waze' }
+]
+
+function Content({ handleClose }) {
+    return (
+        <>
+            <div className="flex items-center justify-between">
+                <p className="text-[#3B3B3B] text-[14px] sm:text-[16px] md:text-[18px] lg:text-[20px] font-medium">باز شدن با</p>
+                <div className="cursor-pointer" onClick={handleClose}>
+                    <CloseModalD />
+                </div>
+            </div>
+            <span className="bg-[#EFEFEF] block h-px w-full mt-[12px] mb-[22px]"></span>
+            <ul className="flex items-center justify-center gap-[32px] md:gap-[36px] lg:gap-[40px] mx-auto flex-wrap md:flex-nowrap md:mx-[72px]">
+                {maps.map((item, idx) => (
+                    <li className="flex items-center flex-col justify-center gap-1">
+                        <Image
+                            className='w-[32px] h-[32px] lg:w-[40px] lg:h-[40px]'
+                            src={item.src}
+                            alt="icon app"
+                            height={40}
+                            width={40}
+                        />
+                        <p className="text-[#3B3B3B] font-normal text-[14px]">{item.name}</p>
+                    </li>
+                ))}
+            </ul>
+        </>
+    )
+}
+
+export default Content
@@ -0,0 +1,51 @@
+'use client';
+
+import { Drawer, Modal } from "@mui/material";
+import { styleDefault } from "@/mui";
+import Content from "./Content";
+
+function ModalOpenLocation({ open, setOpen, handleClose, children }) {
+
+    const toggleDrawer = (newOpen) => () => {
+        setOpen(newOpen);
+    };
+
+    return (
+        <>
+            {/* Button Modal */}
+            {children}
+            {/* Content Modal */}
+            <Modal
+                open={open}
+                onClose={handleClose}
+                className="!hidden md:!flex"
+            >
+                <div
+                    style={styleDefault}
+                    className="!pt-[12px] !pb-[28px] !px-[24px] !bg-[#FAFAFA] !rounded-[8px] !overflow-hidden"
+                >
+                    <Content onClose={handleClose} />
+                </div>
+            </Modal>
+            <Drawer
+                open={open}
+                anchor="bottom"
+                onClose={toggleDrawer(false)}
+                className="!flex md:!hidden"
+                sx={{
+                    '& .MuiPaper-root': {
+                        borderRadius: '25px 25px 0px 0px'
+                    }
+                }}
+            >
+                <div
+                    className="!pt-[12px] !pb-[28px] !px-[24px] !bg-[#FAFAFA] !rounded-[8px] !overflow-hidden !shadow-[0px_1px_24.8px_0px_rgba(155,_155,_155,_0.27)]"
+                >
+                    <Content handleClose={handleClose} />
+                </div>
+            </Drawer>
+        </>
+    )
+}
+
+export default ModalOpenLocation