40 lines
1.3 KiB
TypeScript
40 lines
1.3 KiB
TypeScript
"use client";
|
|
|
|
import Link from "next/link";
|
|
import { usePathname } from "next/navigation";
|
|
import { MessageSquare, FileSearch } from "lucide-react";
|
|
import { cn } from "@duoc-thu/ui";
|
|
|
|
const TABS = [
|
|
{ href: "/", label: "Trò chuyện AI", icon: MessageSquare },
|
|
{ href: "/tra-cuu", label: "Tra cứu Dược thư", icon: FileSearch },
|
|
];
|
|
|
|
export function NavTabs() {
|
|
const pathname = usePathname();
|
|
|
|
return (
|
|
<nav className="flex items-center gap-1 rounded-full border border-border-subtle bg-surface p-1 shadow-sm" aria-label="Chuyển chế độ">
|
|
{TABS.map((tab) => {
|
|
const isActive = pathname === tab.href;
|
|
const Icon = tab.icon;
|
|
return (
|
|
<Link
|
|
key={tab.href}
|
|
href={tab.href}
|
|
className={cn(
|
|
"flex items-center gap-1.5 rounded-full px-3.5 py-1.5 text-xs font-semibold transition-all duration-200",
|
|
isActive
|
|
? "bg-accent-soft text-accent-primary border border-border-accent/40 shadow-sm"
|
|
: "text-txt-muted hover:bg-surface-hover hover:text-txt-primary"
|
|
)}
|
|
>
|
|
<Icon className={cn("h-3.5 w-3.5", isActive ? "text-accent-primary" : "text-txt-muted")} />
|
|
<span>{tab.label}</span>
|
|
</Link>
|
|
);
|
|
})}
|
|
</nav>
|
|
);
|
|
}
|