47 lines
1.6 KiB
TypeScript
47 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="safe-x container mx-auto flex h-14 max-w-6xl items-center justify-between">
|
|
<Link href="/" className="flex items-center gap-2 text-lg font-medium">
|
|
<span className="flex h-8 w-8 items-center justify-center rounded border">
|
|
<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={`${pathname === '/' ? 'font-medium' : 'text-muted-foreground'} transition-colors hover:text-foreground`}
|
|
>
|
|
{t('introduce')}
|
|
</Link>
|
|
<Link
|
|
href="/questionnaire"
|
|
className={`${pathname.startsWith('/questionnaire') ? 'font-medium' : 'text-muted-foreground'} transition-colors hover:text-foreground`}
|
|
>
|
|
{t('questionsList')}
|
|
</Link>
|
|
<Link
|
|
href="/records"
|
|
className={`${pathname.startsWith('/records') ? 'font-medium' : 'text-muted-foreground'} flex items-center gap-1.5 transition-colors hover:text-foreground`}
|
|
>
|
|
<FolderClock className="h-4 w-4" />
|
|
测评档案
|
|
</Link>
|
|
</nav>
|
|
</div>
|
|
</header>
|
|
);
|
|
}
|