spb/market-atlas

1"use client";23import { Activity, Globe2, LineChart, Radio, Search } from "lucide-react";4import Link from "next/link";5import { usePathname } from "next/navigation";6import { cx } from "@/lib/format";7import { useSearch } from "./search-dialog";89const TABS = [10  { href: "/markets", label: "Markets", icon: LineChart, match: /^\/(markets|stocks|etfs|indices|crypto|forex|rates|commodities|instruments|compare)/ },11  { href: "/live", label: "Live", icon: Radio, match: /^\/live/ },12  { href: "#search", label: "Search", icon: Search, match: /^\/search/ },13  { href: "/events", label: "Events", icon: Activity, match: /^\/(events|halts|filings)/ },14  { href: "/exchanges", label: "World", icon: Globe2, match: /^\/(exchanges|countries)/ },15];1617export function MobileTabBar() {18  const path = usePathname();19  const { open } = useSearch();20  return (21    <nav aria-label="Mobile" className="fixed inset-x-0 bottom-0 z-[100] border-t border-rule bg-surface/95 pb-[env(safe-area-inset-bottom,0px)] backdrop-blur lg:hidden">22      <ul className="grid h-[var(--tabbar-h)] grid-cols-5">23        {TABS.map((t) => {24          const active = t.match.test(path);25          const cls = cx("flex h-full flex-col items-center justify-center gap-0.5 text-[10.5px]", active ? "text-accent" : "text-ink-3");26          const Icon = t.icon;27          return (28            <li key={t.href}>29              {t.href === "#search" ? (30                <button type="button" onClick={open} className={cx(cls, "w-full")}>31                  <Icon size={19} />32                  {t.label}33                </button>34              ) : (35                <Link href={t.href} className={cls}>36                  <Icon size={19} />37                  {t.label}38                </Link>39              )}40            </li>41          );42        })}43      </ul>44    </nav>45  );46}47