responsive page clinics & about & contact & doctors

components/clinic/components/contact/ContentDetail.js

@@ -1,8 +1,8 @@
 function ContentDetail({ head, detail }) {
     return (
         <li className="flex flex-col items-start justify-center gap-4">
-            <p className="text-[#525252] text-[20px] font-bold">{head}</p>
-            <p>{detail}</p>
+            <p className="text-[#525252] text-[14px] sm:text-[16px] md:text-[18px] lg:text-[20px] font-bold">{head}</p>
+            <p className="text-[14px] md:text-[16px] text-[#525252]">{detail}</p>
         </li>
     )
 }

components/clinic/components/contact/index.js

@@ -1,27 +1,63 @@
-import { Button } from "@mui/material"
-import Detail from "./Detail"
-import RoutingC from "@/components/icons/RoutingC"
+import { useState } from "react";
+
+import RoutingWhiteC from "@/components/icons/RoutingWhiteC";
+import { Button } from "@mui/material";
+import ModalSearchCity from "./modal";
+import Detail from "./Detail";
+import RoutingC from "@/components/icons/RoutingC";
 
 function Contact({ data }) {
+
+    const [open, setOpen] = useState(false);
+    const handleOpen = () => setOpen(true);
+    const handleClose = () => setOpen(false);
+
     return (
-        <div className="opacity-page py-[32px] px-[64px] border border-[#EFEFEF] rounded-[16px]">
+        <div
+            className="
+                opacity-page border border-[#EFEFEF] rounded-[16px]
+                py-[12px] sm:py-[18px] md:py-[25px] lg:py-[32px] 
+                px-[12px] sm:px-[30px] md:px-[47px] lg:px-[64px]
+            "
+        >
             <div className="flex items-end justify-between">
                 <Detail data={data} />
-                <Button
-                    className="!gap-[8px] !py-[8px] !px-[12px]"
-                    variant="outlined"
+                <ModalSearchCity
+                    open={open}
+                    setOpen={setOpen}
+                    handleClose={handleClose}
                 >
-                    <RoutingC />
-                    مسیریابی
-                </Button>
+                    <Button
+                        className="!hidden md:!flex !gap-[8px] !py-[8px] !px-[12px]"
+                        onClick={handleOpen}
+                        variant="outlined"
+                    >
+                        <RoutingC />
+                        مسیریابی
+                    </Button>
+                </ModalSearchCity>
+            </div>
+            <div
+                className="w-full relative h-[460px] mt-[24px]"
+            >
+                <iframe
+                    src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d83998.96777841153!2d2.264635095144491!3d48.85882549249809!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x47e66e1f06e2b70f%3A0x40b82c3688c9460!2sParis%2C%20France!5e0!3m2!1sen!2snl!4v1723498499341!5m2!1sen!2snl"
+                    className='w-full h-full rounded-lg'
+                    loading="lazy"
+                ></iframe>
+                <ModalSearchCity
+                    open={open}
+                    setOpen={setOpen}
+                    handleClose={handleClose}
+                >
+                    <Button
+                        className="!flex md:!hidden !p-2 !absolute !left-3 !bottom-3 !rounded-full !border !border-[#5559CE] !bg-[#5559CE] !shadow-[0px_1px_24.8px_0px_rgba(69,_69,_69,_0.54)]"
+                        onClick={handleOpen}
+                    >
+                        <RoutingWhiteC />
+                    </Button>
+                </ModalSearchCity>
             </div>
-            <iframe
-                src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d83998.96777841153!2d2.264635095144491!3d48.85882549249809!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x47e66e1f06e2b70f%3A0x40b82c3688c9460!2sParis%2C%20France!5e0!3m2!1sen!2snl!4v1723498499341!5m2!1sen!2snl"
-                className='w-full h-[460px] rounded-lg mt-[24px]'
-                referrerPolicy="no-referrer-when-downgrade"
-                allowFullScreen=""
-                loading="lazy"
-            ></iframe>
         </div>
     )
 }

components/clinic/components/contact/modal/Content.js

@@ -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-[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

components/clinic/components/contact/modal/index.js

@@ -0,0 +1,51 @@
+'use client';
+
+import { Drawer, Modal } from "@mui/material";
+import { styleDefault } from "@/mui";
+import Content from "./Content";
+
+function ModalSearchCity({ 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 onClose={handleClose} />
+                </div>
+            </Drawer>
+        </>
+    )
+}
+
+export default ModalSearchCity