`src/components/SubmitMiniMap.tsx`

39 lines
'use client';
/**
 * Mini map shown next to the LA-records preview card on /submit.
 * Uses react-leaflet (already in package.json from the legacy parcel pages).
 * Tiny — 280px wide, single pin, zoom locked to 17 for a "yes that's the
 * right house" visual confirmation.
 */
import dynamic from 'next/dynamic';

const MapContainer = dynamic(() => import('react-leaflet').then(m => m.MapContainer), { ssr: false });
const TileLayer    = dynamic(() => import('react-leaflet').then(m => m.TileLayer),    { ssr: false });
const CircleMarker = dynamic(() => import('react-leaflet').then(m => m.CircleMarker), { ssr: false });

export function SubmitMiniMap({ lat, lng, label }: { lat: number; lng: number; label: string }) {
  return (
    <div className="border border-ink/15" style={{ width: 220, height: 160 }}>
      <MapContainer
        center={[lat, lng]}
        zoom={17}
        scrollWheelZoom={false}
        zoomControl={false}
        attributionControl={false}
        style={{ width: '100%', height: '100%' }}
      >
        <TileLayer url="https://tiles.stadiamaps.com/tiles/stamen_toner_lite/{z}/{x}/{y}.png" />
        <CircleMarker
          center={[lat, lng]}
          radius={8}
          pathOptions={{ color: '#c9292e', weight: 3, fillColor: '#c9292e', fillOpacity: 0.85 }}
        >
        </CircleMarker>
      </MapContainer>
      <p className="text-[9px] font-mono uppercase tracking-[0.15em] text-ink/45 mt-1 truncate" title={label}>
        {label}
      </p>
    </div>
  );
}