46 lines
1.6 KiB
TypeScript
46 lines
1.6 KiB
TypeScript
"use client";
|
|
|
|
import { HONGSHAN_COORDS } from "@/config/home.config";
|
|
|
|
interface AddressLinkProps {
|
|
place: string;
|
|
city: string;
|
|
className?: string;
|
|
}
|
|
|
|
/** 红山地址展示：龙华区 | 🚇红山地铁站 | Loft民宿 */
|
|
const HONGSHAN_DISPLAY = "龙华区 | 🚇 红山地铁站 | Loft民宿";
|
|
|
|
/** 可点击的地址，点击打开地图（使用 span 避免嵌套在 Link 内时的 a 标签冲突） */
|
|
export default function AddressLink({ place, city, className = "" }: AddressLinkProps) {
|
|
const isHongshan = place.includes("红山");
|
|
const mapUrl = isHongshan
|
|
? `https://api.map.baidu.com/marker?location=${HONGSHAN_COORDS.lat},${HONGSHAN_COORDS.lng}&title=${encodeURIComponent(place)}&output=html`
|
|
: `https://map.baidu.com/search?query=${encodeURIComponent(`${city}${place}`)}`;
|
|
const displayText = isHongshan ? HONGSHAN_DISPLAY : place;
|
|
|
|
return (
|
|
<span
|
|
role="link"
|
|
tabIndex={0}
|
|
onClick={(e) => {
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
window.open(mapUrl, "_blank", "noopener,noreferrer");
|
|
}}
|
|
onKeyDown={(e) => {
|
|
if (e.key === "Enter" || e.key === " ") {
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
window.open(mapUrl, "_blank", "noopener,noreferrer");
|
|
}
|
|
}}
|
|
className={`inline-flex items-center gap-1 text-stone-500 dark:text-stone-400 hover:text-amber-600 dark:hover:text-amber-400 transition-colors cursor-pointer ${className}`}
|
|
title="点击打开地图"
|
|
>
|
|
<span className="inline-block" aria-hidden>📍</span>
|
|
{displayText}
|
|
</span>
|
|
);
|
|
}
|