joshua
b75be18a87
Events and the organisation profile now have an address, with a "Directions" link and an embedded Google Maps view (no API key required) shown on event pages, event cards, and the Contact page. New events default their location to the org's configured address.
34 lines
1.2 KiB
TypeScript
34 lines
1.2 KiB
TypeScript
import { MapPin, ExternalLink } from "lucide-react";
|
|
import { mapsSearchUrl, mapsEmbedUrl } from "@/lib/maps";
|
|
|
|
export function LocationMap({ address, className }: { address?: string | null; className?: string }) {
|
|
if (!address) return null;
|
|
return (
|
|
<div className={className}>
|
|
<div className="flex items-start justify-between gap-3">
|
|
<p className="text-sm text-gray-700 flex items-start gap-1.5">
|
|
<MapPin className="w-4 h-4 shrink-0 mt-0.5 text-gray-400" />
|
|
<span>{address}</span>
|
|
</p>
|
|
<a
|
|
href={mapsSearchUrl(address)}
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
className="text-xs text-brand-600 hover:underline flex items-center gap-1 shrink-0 whitespace-nowrap"
|
|
>
|
|
Directions <ExternalLink className="w-3 h-3" />
|
|
</a>
|
|
</div>
|
|
<div className="mt-2 rounded-lg overflow-hidden border">
|
|
<iframe
|
|
title={`Map showing ${address}`}
|
|
src={mapsEmbedUrl(address)}
|
|
className="w-full h-48 border-0"
|
|
loading="lazy"
|
|
referrerPolicy="no-referrer-when-downgrade"
|
|
/>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|