Function MarketsTab

src/components/TabbedPanel.tsx:254–385

({
  mapped,
  unmapped,
  activeCategories,
  onFlyTo,
  onSelectMarket,
  loading,
}: {
  mapped: ProcessedMarket[];
  unmapped: ProcessedMarket[];
  activeCategories: Set<Category>;
  onFlyTo: (coords: [number, number], marketId: string) => void;
  onSelectMarket: (m: ProcessedMarket) => void;
  loading?: boolean;
})

// --- Markets tab content ---
function MarketsTab({
  mapped,
  unmapped,
  activeCategories,
  onFlyTo,
  onSelectMarket,
  loading,
}: {
  mapped: ProcessedMarket[];
  unmapped: ProcessedMarket[];
  activeCategories: Set<Category>;
  onFlyTo: (coords: [number, number], marketId: string) => void;
  onSelectMarket: (m: ProcessedMarket) => void;
  loading?: boolean;
}) {
  const [search, setSearch] = useState("");
  const [renderNow] = useState(() => Date.now());

  const all = [...mapped, ...unmapped];
  const filtered = all.filter((m) => activeCategories.has(m.category));

  // Apply search filter
  const searchFiltered = search.trim()
    ? filtered.filter((m) =>
        m.title.toLowerCase().includes(search.toLowerCase()) ||
        (m.location && m.location.toLowerCase().includes(search.toLowerCase())) ||
        m.category.toLowerCase().includes(search.toLowerCase())
      )
    : null;

  const newMarkets = (searchFiltered || filtered)
    .filter(
      (m) =>
        m.createdAt &&
        renderNow - new Date(m.createdAt).getTime() < NEW_THRESHOLD_MS
    )
    .sort(
      (a, b) =>
        new Date(b.createdAt!).getTime() - new Date(a.createdAt!).getTime()
    )
    .slice(0, 10);

  const movers = (searchFiltered || filtered)
    .filter((i) => i.change !== null && !isNaN(i.change!))
    .sort((a, b) => Math.abs(b.change!) - Math.abs(a.change!))
    .slice(0, 10);

  const trending = [...(searchFiltered || filtered)]
    .sort((a, b) => (b.volume24h || 0) - (a.volume24h || 0))
    .slice(0, 10);

  const global = searchFiltered
    ? []
    : [...unmapped]
        .filter((m) => activeCategories.has(m.category))
        .sort((a, b) => (b.volume24h || 0) - (a.volume24h || 0))
        .slice(0, 8);