70 lines
2.9 KiB
TypeScript
70 lines
2.9 KiB
TypeScript
|
'use client';
|
||
|
|
|
||
|
|
import Link from "next/link";
|
||
|
|
|
||
|
|
interface HeaderProps {
|
||
|
|
currentLang: string;
|
||
|
|
setCurrentLang: (lang: string) => void;
|
||
|
|
currentPage?: string;
|
||
|
|
navContent: {
|
||
|
|
home: string;
|
||
|
|
docs: string;
|
||
|
|
about: string;
|
||
|
|
contact: string;
|
||
|
|
};
|
||
|
|
}
|
||
|
|
|
||
|
|
export function Header({ currentLang, setCurrentLang, currentPage = '', navContent }: HeaderProps) {
|
||
|
|
const getNavLinkClass = (page: string) => {
|
||
|
|
return currentPage === page
|
||
|
|
? 'text-blue-600 px-3 py-2 text-sm font-medium border-b-2 border-blue-600'
|
||
|
|
: 'text-gray-700 hover:text-blue-600 px-3 py-2 text-sm font-medium';
|
||
|
|
};
|
||
|
|
|
||
|
|
return (
|
||
|
|
<header className="bg-white shadow-sm border-b border-gray-200 sticky top-0 z-50">
|
||
|
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||
|
|
<div className="flex justify-between items-center h-16">
|
||
|
|
<div className="flex items-center">
|
||
|
|
<div className="flex-shrink-0">
|
||
|
|
<div className="h-8 w-8 bg-blue-600 rounded-lg flex items-center justify-center">
|
||
|
|
<span className="text-white font-bold text-sm">MS</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div className="ml-4">
|
||
|
|
<span className="text-xl font-semibold text-gray-900">MultiSite</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<nav className="hidden md:flex space-x-8">
|
||
|
|
<Link href="/" className={getNavLinkClass('home')}>
|
||
|
|
{navContent.home}
|
||
|
|
</Link>
|
||
|
|
<Link href="/docs" className={getNavLinkClass('docs')}>
|
||
|
|
{navContent.docs}
|
||
|
|
</Link>
|
||
|
|
<Link href="/about" className={getNavLinkClass('about')}>
|
||
|
|
{navContent.about}
|
||
|
|
</Link>
|
||
|
|
<Link href="/contact" className={getNavLinkClass('contact')}>
|
||
|
|
{navContent.contact}
|
||
|
|
</Link>
|
||
|
|
</nav>
|
||
|
|
|
||
|
|
<div className="flex items-center space-x-4">
|
||
|
|
<select
|
||
|
|
value={currentLang}
|
||
|
|
onChange={(e) => setCurrentLang(e.target.value)}
|
||
|
|
className="appearance-none bg-white border border-gray-300 rounded-md px-3 py-1 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
|
||
|
|
>
|
||
|
|
<option value="zh-CN">简体中文</option>
|
||
|
|
<option value="zh-TW">繁體中文</option>
|
||
|
|
<option value="en">English</option>
|
||
|
|
</select>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</header>
|
||
|
|
);
|
||
|
|
}
|