51 lines
1.6 KiB
TypeScript
51 lines
1.6 KiB
TypeScript
'use client';
|
|
|
|
import Link from 'next/link';
|
|
import { usePathname } from 'next/navigation';
|
|
import { ClipboardList, FolderClock } from 'lucide-react';
|
|
import { useScopedI18n } from '@/locales/client';
|
|
|
|
export function Navbar() {
|
|
const pathname = usePathname();
|
|
const t = useScopedI18n('component.navBar');
|
|
|
|
return (
|
|
<header className="border-b">
|
|
<div className="container flex items-center justify-between h-14 px-4 max-w-6xl mx-auto">
|
|
<Link href="/" className="text-lg font-medium flex items-center gap-2">
|
|
<span className="w-8 h-8 border rounded flex items-center justify-center">
|
|
<ClipboardList className="h-4 w-4" />
|
|
</span>
|
|
<span className="hidden md:block">{t('title')}</span>
|
|
</Link>
|
|
|
|
<nav className="flex items-center gap-4 text-sm">
|
|
<Link
|
|
href="/"
|
|
className="font-medium hover:text-foreground transition-colors"
|
|
>
|
|
{t('introduce')}
|
|
</Link>
|
|
<Link
|
|
href="/questionnaire"
|
|
className={`${
|
|
pathname.startsWith('/questionnaire')
|
|
? 'font-medium'
|
|
: 'text-muted-foreground'
|
|
} hover:text-foreground transition-colors`}
|
|
>
|
|
{t('questionsList')}
|
|
</Link>
|
|
<Link
|
|
href="/records"
|
|
className={`${pathname.startsWith('/records') ? 'font-medium' : 'text-muted-foreground'} flex items-center gap-1.5 hover:text-foreground transition-colors`}
|
|
>
|
|
<FolderClock className="h-4 w-4" />
|
|
测评档案
|
|
</Link>
|
|
</nav>
|
|
</div>
|
|
</header>
|
|
);
|
|
}
|