38 lines
1.1 KiB
TypeScript
38 lines
1.1 KiB
TypeScript
"use client";
|
|
|
|
interface AddressLinkProps {
|
|
place: string;
|
|
city: string;
|
|
className?: string;
|
|
}
|
|
|
|
/** 可点击的地址，点击打开地图（使用 span 避免嵌套在 Link 内时的 a 标签冲突） */
|
|
export default function AddressLink({ place, city, className = "" }: AddressLinkProps) {
|
|
const query = encodeURIComponent(`${city}${place}`);
|
|
const mapUrl = `https://www.google.com/maps/search/?api=1&query=${query}`;
|
|
|
|
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>
|
|
{place}
|
|
</span>
|
|
);
|
|
}
|