Function TabbedPanel

src/components/TabbedPanel.tsx:40–174

({
  mapped,
  unmapped,
  activeCategories,
  onToggleCategory,
  onFlyTo,
  selectedMarket,
  onSelectMarket,
  selectedCountry,
  activeTab,
  onTabChange,
  timeRange,
  onTimeRangeChange,
  autoRefresh,
  onToggleAutoRefresh,
  loading,
}: TabbedPanelProps)

const NEW_THRESHOLD_MS = 6 * 60 * 60 * 1000;

export default function TabbedPanel({
  mapped,
  unmapped,
  activeCategories,
  onToggleCategory,
  onFlyTo,
  selectedMarket,
  onSelectMarket,
  selectedCountry,
  activeTab,
  onTabChange,
  timeRange,
  onTimeRangeChange,
  autoRefresh,
  onToggleAutoRefresh,
  loading,
}: TabbedPanelProps) {
  const handleMarketClick = (m: ProcessedMarket) => {
    onSelectMarket(m);
    onTabChange("detail");
    if (m.coords) onFlyTo(m.coords, m.id);
  };

  // Compute related markets for the detail panel
  const relatedMarkets = useMemo(() => {
    if (!selectedMarket) return [];
    const all = [...mapped, ...unmapped];
    return all
      .filter(
        (m) =>
          m.id !== selectedMarket.id &&
          (m.category === selectedMarket.category ||
            (selectedMarket.location && m.location === selectedMarket.location))
      )
      .sort((a, b) => (b.volume24h || 0) - (a.volume24h || 0))
      .slice(0, 5);
  }, [selectedMarket, mapped, unmapped]);

  return (
    <aside className="w-[340px] bg-[#0a0a0a] border-l border-[#1e1e1e] flex flex-col shrink-0 hidden md:flex">
      {/* Tab bar */}
      <div className="flex border-b border-[#1e1e1e] shrink-0">
        {TABS.map((tab) => (
          <button
            key={tab.id}
            onClick={() => onTabChange(tab.id)}
            className={`flex-1 py-1.5 text-[10px] font-mono tracking-wide transition-colors ${
              activeTab === tab.id
                ? "text-[#e8e8e8] bg-[#141414] border-b border-[#e8e8e8]"
                : "text-[#777] hover:text-[#a0a0a0] hover:bg-[#0e0e0e]"
            }`}
          >
            {tab.label}
          </button>
        ))}
      </div>

      {/* Tab content with fade transition */}