← back to Stayclaim

src/components/InteractiveMapMount.tsx

28 lines

'use client';
import dynamic from 'next/dynamic';
import type { MapPin } from './InteractiveMap';

/**
 * Dynamic-only mount for the Leaflet map (it needs `window`).
 * Use this from server components.
 */
const InteractiveMap = dynamic(() => import('./InteractiveMap').then(m => m.InteractiveMap), {
  ssr: false,
  loading: () => (
    <div className="bg-ink/10 flex items-center justify-center text-[10px] uppercase tracking-[0.2em] text-ink/45" style={{ minHeight: 200 }}>
      Loading map…
    </div>
  ),
});

export function InteractiveMapMount(props: {
  pins: MapPin[];
  height?: number;
  className?: string;
  variant?: 'voyager' | 'positron' | 'dark';
}) {
  return <InteractiveMap {...props} />;
}

export type { MapPin };