`apps/web/src/app/HeroMap.tsx`

25 lines
"use client";

import dynamic from "next/dynamic";
import type { MapMarker } from "@homesonspec/shared-ui/src/MapView";

// Leaflet needs window — client-only load, direct file import (not the barrel),
// matching the search page. Renders on mount, so the hero map is live on page load.
const MapView = dynamic(() => import("@homesonspec/shared-ui/src/MapView").then((m) => m.MapView), {
  ssr: false,
  loading: () => (
    <div className="flex h-full w-full items-center justify-center bg-teal-950/40 text-sm text-teal-100">
      Loading map…
    </div>
  ),
});

/**
 * Hero map — plots every community with live inventory across the country.
 * Auto-fits to the full marker set (MapView.FitMarkers), so it opens showing
 * the whole national footprint the moment the page loads.
 */
export default function HeroMap({ markers }: { markers: MapMarker[] }) {
  return <MapView markers={markers} center={[39.5, -98.35]} zoom={4} />;
}