feat: Implement initial weather dashboard with interactive map, city details, and API integration.

2026-03-09 10:36:03 +08:00
parent d162b91ed9
commit 283a935f24
35 changed files with 5962 additions and 2098 deletions
@@ -0,0 +1,28 @@
+"use client";
+
+import { useDashboardStore } from "@/hooks/useDashboardStore";
+import { useLeafletMap } from "@/hooks/useLeafletMap";
+
+export function MapCanvas() {
+  const store = useDashboardStore();
+  const { containerRef } = useLeafletMap({
+    cities: store.cities,
+    cityDetailsByName: store.cityDetailsByName,
+    citySummariesByName: store.citySummariesByName,
+    onClosePanel: store.closePanel,
+    onEnsureCityDetail: store.ensureCityDetail,
+    onRegisterStopMotion: store.registerMapStopMotion,
+    onSelectCity: (cityName) => {
+      void store.selectCity(cityName);
+    },
+    selectedCity: store.selectedCity,
+    selectedDetail: store.selectedDetail,
+    suspendMotion:
+      Boolean(store.futureModalDate) ||
+      store.historyState.isOpen ||
+      store.isGuideOpen,
+    isLoadingDetail: store.loadingState.cityDetail,
+  });
+
+  return <div ref={containerRef} className="map" />;
+}