add shared navbar on /account, /chat, /bee
Three-link nav (Chat / Account / Bee) with active-route highlighting, plus a t4t Gateway home link on the left. Replaces the bespoke header on the chat page; account and bee gain the same top-of-page nav. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
1 parent
86e0ab356a
commit
83760c4a9b
4 files changed
+64
-18
No files matched your search
@@ -0,0 +1,37 @@
|
||||
import { NavLink } from 'react-router';
|
||||
|
||||
const ITEMS = [
|
||||
{ to: '/chat', label: 'Chat' },
|
||||
{ to: '/account', label: 'Account' },
|
||||
{ to: '/bee', label: 'Bee' },
|
||||
];
|
||||
|
||||
export function Nav() {
|
||||
return (
|
||||
<nav className='border-b border-neutral-200 bg-white'>
|
||||
<div className='mx-auto flex max-w-3xl items-center justify-between px-6 py-3'>
|
||||
<a href='/' className='text-sm font-semibold tracking-tight'>
|
||||
t4t Gateway
|
||||
</a>
|
||||
<ul className='flex gap-1'>
|
||||
{ITEMS.map((item) => (
|
||||
<li key={item.to}>
|
||||
<NavLink
|
||||
to={item.to}
|
||||
className={({ isActive }) =>
|
||||
`inline-flex h-8 items-center rounded-md px-3 text-sm font-medium transition-colors ${
|
||||
isActive
|
||||
? 'bg-neutral-900 text-white'
|
||||
: 'text-neutral-700 hover:bg-neutral-100'
|
||||
}`
|
||||
}
|
||||
>
|
||||
{item.label}
|
||||
</NavLink>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
);
|
||||
}
|
||||
Reference in new issue
Block a user