spb/rareindex

1'use client';23import Link from 'next/link';4import { usePathname } from 'next/navigation';5import { Compass, Home, LineChart, ScanLine, UserRound } from 'lucide-react';6import { cn } from '@/lib/format';78const TABS = [9  { href: '/', label: 'Home', icon: Home, match: (p: string) => p === '/' },10  { href: '/explore', label: 'Explore', icon: Compass, match: (p: string) => p.startsWith('/explore') || p.startsWith('/search') || p.startsWith('/asset') || p.startsWith('/set') || p.startsWith('/brand') },11  { href: '/markets', label: 'Markets', icon: LineChart, match: (p: string) => p.startsWith('/markets') || p.startsWith('/rareindex') || p.startsWith('/trending') || p.startsWith('/sales') || p.startsWith('/listings') || p.startsWith('/auctions') || p.startsWith('/market-map') },12  { href: '/scanner', label: 'Scanner', icon: ScanLine, match: (p: string) => p.startsWith('/scanner') || p.startsWith('/research') },13  { href: '/account', label: 'Account', icon: UserRound, match: (p: string) => p.startsWith('/account') || p.startsWith('/collections') || p.startsWith('/watchlist') || p.startsWith('/alerts') || p.startsWith('/login') || p.startsWith('/signup') || p.startsWith('/notifications') },14];1516/** Mobile bottom tab bar (§165): five primary destinations, safe-area aware, hidden from md up. */17export function TabBar() {18  const pathname = usePathname() ?? '/';19  if (pathname.startsWith('/admin')) return null;20  return (21    <nav className="fixed inset-x-0 bottom-0 z-40 border-t border-border bg-elevated/92 backdrop-blur-md md:hidden" aria-label="Primary mobile" style={{ paddingBottom: 'env(safe-area-inset-bottom)' }}>22      <ul className="grid h-[var(--ri-tabbar-h)] grid-cols-5">23        {TABS.map((t) => {24          const active = t.match(pathname);25          const Icon = t.icon;26          return (27            <li key={t.href}>28              <Link href={t.href} aria-current={active ? 'page' : undefined} className={cn('flex h-full flex-col items-center justify-center gap-0.5 text-[10px] font-medium', active ? 'text-fg' : 'text-subtle')}>29                <span className={cn('flex h-7 w-12 items-center justify-center rounded-full transition-colors', active && 'bg-inset')}>30                  <Icon className="h-[18px] w-[18px]" strokeWidth={active ? 2.25 : 1.75} />31                </span>32                {t.label}33              </Link>34            </li>35          );36        })}37      </ul>38    </nav>39  );40}41