59 lines
2.1 KiB
TypeScript
59 lines
2.1 KiB
TypeScript
'use client';
|
|
|
|
import Link from 'next/link';
|
|
import { usePathname } from 'next/navigation';
|
|
import ThemeSwitcher from './ThemeSwitcher';
|
|
import { MagnifyingGlassIcon, UserCircleIcon } from '@heroicons/react/24/outline';
|
|
|
|
export default function Navbar() {
|
|
const pathname = usePathname();
|
|
|
|
const navItems = [
|
|
{ href: '/parts', label: 'Parts Catalog' },
|
|
{ href: '/build', label: 'Build Checklist' },
|
|
{ href: '/builds', label: 'My Builds' },
|
|
];
|
|
|
|
return (
|
|
<>
|
|
{/* Top Bar */}
|
|
<div className="w-full bg-[#4B6516] text-white h-10 flex items-center justify-between px-4 sm:px-8">
|
|
<span className="font-bold text-lg tracking-tight">Pew Builder</span>
|
|
<UserCircleIcon className="h-7 w-7 text-white opacity-80" />
|
|
</div>
|
|
|
|
{/* Subnav */}
|
|
<nav className="bg-white dark:bg-neutral-800 border-b border-neutral-200 dark:border-neutral-700">
|
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 flex justify-between items-center h-14">
|
|
{/* Left: Nav Links */}
|
|
<div className="flex items-center space-x-6">
|
|
{navItems.map((item) => (
|
|
<Link
|
|
key={item.href}
|
|
href={item.href}
|
|
className={`px-2 py-1 rounded-md text-sm font-medium transition-colors ${
|
|
pathname === item.href
|
|
? 'text-primary font-semibold underline underline-offset-4'
|
|
: 'text-neutral-700 dark:text-neutral-200 hover:text-primary'
|
|
}`}
|
|
>
|
|
{item.label}
|
|
</Link>
|
|
))}
|
|
</div>
|
|
|
|
{/* Right: Sign In + Search */}
|
|
<div className="flex items-center space-x-4">
|
|
<Link href="/signin" className="btn btn-sm btn-ghost text-sm font-medium">
|
|
Sign In
|
|
</Link>
|
|
<button className="p-2 rounded-full hover:bg-neutral-100 dark:hover:bg-neutral-700 transition-colors">
|
|
<MagnifyingGlassIcon className="h-5 w-5 text-neutral-700 dark:text-neutral-200" />
|
|
</button>
|
|
<ThemeSwitcher />
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
</>
|
|
);
|
|
}
|