79 lines
2.9 KiB
JavaScript
79 lines
2.9 KiB
JavaScript
import { useState } from "react";
|
|
import dynamic from "next/dynamic";
|
|
|
|
import RoutingWhiteC from "@/components/icons/RoutingWhiteC";
|
|
import { Button } from "@mui/material";
|
|
import Detail from "./Detail";
|
|
import RoutingC from "@/components/icons/RoutingC";
|
|
import ModalOpenLocation from "@/app/component/openLocation";
|
|
import CustomLoading from "@/app/component/loading/Custom";
|
|
import { hasClinicContact } from "@/lib/clinicContact";
|
|
|
|
// همان نقشهٔ صفحهٔ پزشک: Leaflet روی تایلهای OpenStreetMap. embed گوگلمپ
|
|
// در ایران بارگذاری نمیشد و کادر نقشه خالی میماند.
|
|
const MapView = dynamic(() => import("@/components/common/MapView"), {
|
|
ssr: false,
|
|
});
|
|
|
|
function Contact({ data }) {
|
|
const [open, setOpen] = useState(false);
|
|
const handleOpen = () => setOpen(true);
|
|
const handleClose = () => setOpen(false);
|
|
|
|
// نقشه و مسیریابی هر دو مختصات میخواهند — لینکهای مسیریابی (بلد/گوگل/ویز)
|
|
// بدون lat/lng به `undefined,undefined` میرسند. با نشانیِ متنی تنها، هیچکدام
|
|
// معنا ندارد و فقط ردیف آدرس نمایش داده میشود.
|
|
const hasCoords = Boolean(data?.map?.latitude && data?.map?.longitude);
|
|
|
|
if (!hasClinicContact(data)) return null;
|
|
|
|
return (
|
|
<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} />
|
|
{hasCoords && <ModalOpenLocation
|
|
data={data}
|
|
open={open}
|
|
setOpen={setOpen}
|
|
handleClose={handleClose}
|
|
>
|
|
<Button
|
|
className="!hidden md:!flex !gap-[8px] !py-[8px] !px-[12px]"
|
|
onClick={handleOpen}
|
|
variant="outlined"
|
|
>
|
|
<RoutingC />
|
|
مسیریابی
|
|
</Button>
|
|
</ModalOpenLocation>}
|
|
</div>
|
|
{hasCoords && <div className="w-full relative h-[460px] mt-[24px]">
|
|
<CustomLoading width="full" height={400}>
|
|
<MapView
|
|
latitude={data.map.latitude}
|
|
longitude={data.map.longitude}
|
|
/>
|
|
<ModalOpenLocation
|
|
data={data}
|
|
open={open}
|
|
setOpen={setOpen}
|
|
handleClose={handleClose}
|
|
>
|
|
<Button
|
|
className="!flex md:!hidden !text-[#FAFAFA] !gap-[8px] !p-2 !absolute !left-3 !bottom-3 !z-[1000] !rounded-[4px] !border !border-[#5559CE] !bg-[#5559CE] !shadow-[0px_1px_24px_0px_rgba(69,_69,_69,_0.54)]"
|
|
onClick={handleOpen}
|
|
>
|
|
<RoutingWhiteC />
|
|
مسیریابی
|
|
</Button>
|
|
</ModalOpenLocation>
|
|
</CustomLoading>
|
|
</div>}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default Contact;
|