Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 | 11x 307x 307x 307x 1535x 1535x | import { Link, useRouterState } from "@tanstack/react-router";
import {
LayoutDashboard,
MessageSquare,
Send,
FileText,
Megaphone,
} from "lucide-react";
const NAV_ITEMS: ReadonlyArray<{
label: string;
href: string;
icon: typeof LayoutDashboard;
exact?: boolean;
}> = [
{
label: "Dashboard",
href: "/admin/whatsapp",
icon: LayoutDashboard,
exact: true,
},
{ label: "Inbox", href: "/admin/whatsapp/inbox", icon: MessageSquare },
{ label: "Quick Send", href: "/admin/whatsapp/send", icon: Send },
{ label: "Templates", href: "/admin/whatsapp/templates", icon: FileText },
{
label: "Campaigns",
href: "/admin/whatsapp/campaigns",
icon: Megaphone,
},
];
export function WhatsAppSubNav() {
const { location } = useRouterState();
const pathname = location.pathname;
return (
<nav className="border-b border-border-default bg-background-default">
<div className="flex gap-1 overflow-x-auto px-2">
{NAV_ITEMS.map((item) => {
const isActive = item.exact
? pathname === item.href
: pathname.startsWith(item.href);
return (
<Link
key={item.href}
to={item.href}
className={`inline-flex items-center gap-1.5 px-3 py-2.5 text-sm font-medium whitespace-nowrap border-b-2 transition-colors ${
isActive
? "border-green-600 text-green-700 dark:text-green-400"
: "border-transparent text-foreground-muted hover:text-foreground-default hover:border-border-default"
}`}
>
<item.icon className="h-4 w-4" />
{item.label}
</Link>
);
})}
</div>
</nav>
);
}
|