The routing modal shipped broken deep links: snapp.ir/route and tapsi.ir/route paths don't exist (404), and balad used the wrong path and params. Keep only apps with verified destination deep links and fix their formats: - Remove Snapp and Tapsi (no valid web destination route). - Balad: balad.ir/location?latitude=&longitude= (was /map?lat=&lng=). - Google Maps and Waze kept (already correct). - Guard data.map destructuring against null. - Dashboard turn detail: use maps/dir directions URL instead of a plain q= pin to match the مسیریابی label. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
66 lines
2.0 KiB
JavaScript
66 lines
2.0 KiB
JavaScript
import CloseModalD from "@/components/icons/CloseModalD";
|
|
import Image from "next/image";
|
|
|
|
function Content({ data, onClose }) {
|
|
const { latitude, longitude } = data?.map ?? {};
|
|
|
|
const maps = [
|
|
{
|
|
src: "/assets/images/maps.png",
|
|
name: "maps",
|
|
url: `https://www.google.com/maps/dir/?api=1&destination=${latitude},${longitude}`,
|
|
},
|
|
{
|
|
src: "/assets/images/balad.png",
|
|
name: "balad",
|
|
url: `https://balad.ir/location?latitude=${latitude}&longitude=${longitude}`,
|
|
},
|
|
{
|
|
src: "/assets/images/waze.png",
|
|
name: "waze",
|
|
url: `https://waze.com/ul?ll=${latitude},${longitude}&navigate=yes`,
|
|
},
|
|
];
|
|
|
|
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={onClose}>
|
|
<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
|
|
key={idx}
|
|
className="flex items-center flex-col justify-center gap-1"
|
|
>
|
|
<a href={item.url} target="_blank" rel="noopener noreferrer">
|
|
<Image
|
|
className="
|
|
w-[32px] h-[32px] lg:w-[40px] lg:h-[40px]
|
|
min-w-[32px] min-h-[32px] lg:min-w-[40px] lg:min-h-[40px]
|
|
max-w-[32px] max-h-[32px] lg:max-w-[40px] lg:max-h-[40px]
|
|
"
|
|
src={item.src}
|
|
alt="icon app"
|
|
height={40}
|
|
width={40}
|
|
/>
|
|
<p className="text-[#3B3B3B] text-center font-normal text-[14px]">
|
|
{item.name}
|
|
</p>
|
|
</a>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</>
|
|
);
|
|
}
|
|
|
|
export default Content;
|