SPlit up

frontend/src/hooks/useMapCardLayout.ts

@@ -0,0 +1,43 @@
+import { useMemo } from 'react';
+
+const DESKTOP_TOP_CARD_WIDTH = 300;
+const DESKTOP_TOP_CARD_GAP = 8;
+const DESKTOP_TOP_CARD_HORIZONTAL_INSET = 24;
+const DESKTOP_TOP_CARDS_STACKED_MIN_MAP_WIDTH =
+  DESKTOP_TOP_CARD_WIDTH + DESKTOP_TOP_CARD_HORIZONTAL_INSET;
+const DESKTOP_TOP_CARDS_ROW_MIN_MAP_WIDTH =
+  DESKTOP_TOP_CARD_WIDTH * 2 + DESKTOP_TOP_CARD_GAP + DESKTOP_TOP_CARD_HORIZONTAL_INSET;
+
+interface UseMapCardLayoutOptions {
+  mapWidth: number;
+  hideTopCardsWhenNarrow: boolean;
+  hideLegend: boolean;
+  hideLocationSearch: boolean;
+}
+
+/**
+ * Desktop top-card layout for the map overlay area: hides the cards entirely
+ * when the map is too narrow for a single card, and stacks them vertically
+ * when there is room for one card but not for two side by side.
+ */
+export function useMapCardLayout({
+  mapWidth,
+  hideTopCardsWhenNarrow,
+  hideLegend,
+  hideLocationSearch,
+}: UseMapCardLayoutOptions) {
+  return useMemo(() => {
+    const hideTopCardsForWidth =
+      hideTopCardsWhenNarrow && mapWidth > 0 && mapWidth < DESKTOP_TOP_CARDS_STACKED_MIN_MAP_WIDTH;
+    const stackTopCards =
+      hideTopCardsWhenNarrow &&
+      mapWidth >= DESKTOP_TOP_CARDS_STACKED_MIN_MAP_WIDTH &&
+      mapWidth < DESKTOP_TOP_CARDS_ROW_MIN_MAP_WIDTH;
+
+    return {
+      showLocationSearch: !hideLocationSearch && !hideTopCardsForWidth,
+      showLegend: !hideLegend && !hideTopCardsForWidth,
+      topCardsLayoutClass: stackTopCards ? 'flex-col items-start' : 'items-start justify-between',
+    };
+  }, [mapWidth, hideTopCardsWhenNarrow, hideLegend, hideLocationSearch]);
+}