spb/fetcha

1"use client";2import Link from "next/link";3import { usePathname } from "next/navigation";4import { cn } from "@/lib/utils";56export const SETTINGS_TABS = [7  { href: "/dashboard/settings", label: "Profile", exact: true },8  { href: "/dashboard/settings/security", label: "Security" },9  { href: "/dashboard/settings/audit", label: "Audit log" },10  { href: "/dashboard/settings/legal", label: "Legal" },11] as const;1213export function SettingsNav() {14  const pathname = usePathname();15  return (16    <nav className="no-scrollbar flex items-center gap-4 overflow-x-auto border-b border-border text-fg-muted" aria-label="Settings sections">17      {SETTINGS_TABS.map((t) => {18        const active = "exact" in t && t.exact ? pathname === t.href : pathname === t.href || pathname.startsWith(t.href + "/");19        return (20          <Link21            key={t.href}22            href={t.href}23            aria-current={active ? "page" : undefined}24            className={cn("-mb-px whitespace-nowrap border-b-2 pb-2.5 pt-1 text-[13px] font-medium transition-colors hover:text-fg", active ? "border-fg text-fg" : "border-transparent")}25          >26            {t.label}27          </Link>28        );29      })}30    </nav>31  );32}33