spb/lou-ka

1// -----------------------------------------------------------------------------2// Lou-Ka — Location court terme3// components/CtFicheMap.tsx : mini-carte 3D de la fiche court terme4// (KaSpotlightMap) — chargée paresseusement depuis CourtTermeFiche.tsx.5// -----------------------------------------------------------------------------6import { useMemo } from "react";7import "mapbox-gl/dist/mapbox-gl.css";8import "@groupe-ka/ka-maps/styles.css";9import type { MapProperty } from "@groupe-ka/ka-maps";10import { KaBrandBadge, KaSpotlightMap } from "@groupe-ka/ka-maps/react";11import type { CtListing } from "../ctapi";12import { louKaMapTheme } from "../kamaps/theme";13import { MAPBOX_TOKEN } from "../kamaps/config";1415export default function CtFicheMap({ l }: { l: CtListing }) {16  const property = useMemo<MapProperty | null>(() => {17    if (l.lat == null || l.lng == null) return null;18    return {19      id: l.uid,20      appSource: "lou-ka",21      latitude: l.lat,22      longitude: l.lng,23      kind: "listing",24      listingType: "rent",25      price: l.price_night ?? undefined,26      propertyType: l.property_type || undefined,27      address: l.address || l.title || undefined,28      city: l.city || undefined,29      thumbnailUrl: l.images?.[0],30    };31  }, [l.uid, l.lat, l.lng, l.price_night, l.property_type, l.address, l.title, l.city, l.images]);3233  if (!property) return null;3435  return (36    <div className="lmap3d" role="img"37         aria-label={`Carte 3D — ${l.address || l.title}`}>38      <KaSpotlightMap39        theme={louKaMapTheme}40        mapboxToken={MAPBOX_TOKEN}41        property={property}42        buildingColor="#ff6a00"43      >44        <KaBrandBadge />45      </KaSpotlightMap>46    </div>47  );48}49