spb/satelliteindex

1'use client';23import Link from 'next/link';4import { usePathname } from 'next/navigation';5import { cn } from '@/lib/cn';67export const ADMIN_NAV = [8  { href: '/admin', label: 'Overview', exact: true },9  { href: '/admin/raw', label: 'Raw records' },10  { href: '/admin/data-quality', label: 'Data quality' },11  { href: '/admin/entity-resolution', label: 'Entity resolution' },12  { href: '/admin/costs', label: 'Costs' },13] as const;1415/** Admin navigation: horizontal scrollable tabs on mobile, vertical sidebar from lg. Connector detail pages highlight Overview. */16export function AdminNav({ className }: { className?: string }) {17  const pathname = usePathname() ?? '/admin';18  return (19    <nav aria-label="Admin" className={cn('no-scrollbar -mx-4 flex gap-1 overflow-x-auto px-4 lg:mx-0 lg:flex-col lg:gap-0.5 lg:overflow-visible lg:px-0', className)}>20      {ADMIN_NAV.map((item) => {21        const active = 'exact' in item && item.exact ? pathname === item.href || pathname.startsWith('/admin/connectors') : pathname.startsWith(item.href);22        return (23          <Link24            key={item.href}25            href={item.href}26            aria-current={active ? 'page' : undefined}27            className={cn(28              'inline-flex min-h-11 shrink-0 items-center rounded-md px-3 text-sm transition-colors lg:min-h-10',29              active ? 'bg-plane-3 text-ink' : 'text-ink-2 hover:bg-plane-2 hover:text-ink',30            )}31          >32            {item.label}33          </Link>34        );35      })}36      <form action="/api/admin/logout" method="post" className="ml-auto shrink-0 lg:ml-0 lg:mt-4 lg:border-t lg:border-rule lg:pt-3">37        <button type="submit" className="inline-flex min-h-11 items-center rounded-md px-3 text-sm text-ink-3 hover:bg-plane-2 hover:text-ink lg:min-h-10">38          Sign out39        </button>40      </form>41    </nav>42  );43}44