hamedandClaude Opus 4.8
ed985f55fb
The Google Maps iframe was blocked by CSP (frame-src falls back to default-src 'self'). Switched the doctor-page location map to react-leaflet with OpenStreetMap tiles — no iframe, and CSP already allows https image tiles (img-src 'self' https:). Marker icons are bundled from the leaflet package (no CDN). MapView is dynamically imported (ssr:false) since Leaflet needs window. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
98 lines
3.4 KiB
JavaScript
98 lines
3.4 KiB
JavaScript
"use client";
|
|
|
|
import { useState } from "react";
|
|
import dynamic from "next/dynamic";
|
|
import { Button } from "@mui/material";
|
|
import ArrowBottomGrayD from "@/components/icons/ArrowBottomGrayD";
|
|
import ModalOpenLocation from "@/app/component/openLocation";
|
|
import RoutingWhiteC from "@/components/icons/RoutingWhiteC";
|
|
import RoutingC from "@/components/icons/RoutingC";
|
|
|
|
// Leaflet به window نیاز دارد → فقط کلاینت
|
|
const MapView = dynamic(() => import("./MapView"), { ssr: false });
|
|
|
|
function Item({ data }) {
|
|
const [isOpen, setIsOpen] = useState(false);
|
|
|
|
const [open, setOpen] = useState(false);
|
|
const handleOpen = () => setOpen(true);
|
|
const handleClose = () => setOpen(false);
|
|
|
|
return (
|
|
<>
|
|
<a
|
|
id="location"
|
|
className="absolute -translate-y-[148px] sm:-translate-y-[157px] md:-translate-y-[166px] lg:-translate-y-[176px]"
|
|
></a>
|
|
<Button
|
|
variant="texts"
|
|
onClick={() => setIsOpen(!isOpen)}
|
|
className="!px-[2px] !py-[4px] !flex !items-center !justify-between !w-full"
|
|
>
|
|
<p className="text-[#616161] text-[16px] font-medium">{data.name}</p>
|
|
<div
|
|
className={` transition-all duration-500 ${isOpen ? "rotate-180" : "rotate-0"} `}
|
|
>
|
|
<ArrowBottomGrayD />
|
|
</div>
|
|
</Button>
|
|
<div
|
|
className={` overflow-hidden transition-all duration-500 ${isOpen ? "max-h-[800px] " : "max-h-0"} `}
|
|
>
|
|
<div className="gap-3 md:gap-4 flex flex-col items-start mt-[16px] sm:mt-[19px] md:mt-[22px] lg:mt-[24px]">
|
|
<p className="text-[#525252] text-[16px] font-normal">
|
|
آدرس: {data.address}
|
|
</p>
|
|
<div className="flex w-full items-center justify-between">
|
|
<p className="text-[#525252] text-[16px] font-normal">
|
|
تلفن: {data.telephone}
|
|
</p>
|
|
{data?.map?.latitude && data?.map?.longitude && (
|
|
<ModalOpenLocation
|
|
open={open}
|
|
data={data}
|
|
setOpen={setOpen}
|
|
handleClose={handleClose}
|
|
>
|
|
<Button
|
|
className="!hidden md:!flex !gap-[8px] !py-[8px] !px-[12px]"
|
|
onClick={handleOpen}
|
|
variant="outlined"
|
|
>
|
|
<RoutingC />
|
|
مسیریابی
|
|
</Button>
|
|
</ModalOpenLocation>
|
|
)}
|
|
</div>
|
|
</div>
|
|
{isOpen && data?.map?.latitude && data?.map?.longitude && (
|
|
<div className="w-full relative h-[219px] sm:h-[302px] md:h-[385px] lg:h-[470px] mt-[24px]">
|
|
<MapView
|
|
latitude={data.map.latitude}
|
|
longitude={data.map.longitude}
|
|
/>
|
|
|
|
<ModalOpenLocation
|
|
open={open}
|
|
data={data}
|
|
setOpen={setOpen}
|
|
handleClose={handleClose}
|
|
>
|
|
<Button
|
|
className="!flex md:!hidden !p-2 !absolute !left-3 !bottom-3 !rounded-[4px] !border !border-[#5559CE] !py-2 !px-3 !bg-[#5559CE] !shadow-[0px_1px_24.8px_0px_rgba(69,_69,_69,_0.54)] !gap-[8px] !text-[#FAFAFA] !text-[14px] !font-medium"
|
|
onClick={handleOpen}
|
|
>
|
|
<RoutingWhiteC />
|
|
مسیریابی
|
|
</Button>
|
|
</ModalOpenLocation>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</>
|
|
);
|
|
}
|
|
|
|
export default Item;
|