78 lines
3.0 KiB
TypeScript
78 lines
3.0 KiB
TypeScript
'use client';
|
|
|
|
import { usePathname, useRouter } from 'next/navigation';
|
|
|
|
interface NavigationProps {
|
|
currentLang: string;
|
|
t: {
|
|
nav: {
|
|
products: string;
|
|
security: string;
|
|
datacenter: string;
|
|
support: string;
|
|
console: string;
|
|
};
|
|
};
|
|
}
|
|
|
|
export default function Navigation({ currentLang, t }: NavigationProps) {
|
|
const router = useRouter();
|
|
const pathname = usePathname();
|
|
|
|
const switchLanguage = (lang: string) => {
|
|
const currentPath = pathname.replace(/^\/[a-z]{2}/, '');
|
|
router.push(`/${lang}${currentPath}`);
|
|
};
|
|
|
|
return (
|
|
<nav className="relative z-50 p-6 border-b border-cyan-500/30 backdrop-blur-sm">
|
|
<div className="max-w-7xl mx-auto flex justify-between items-center">
|
|
<div className="text-2xl font-bold text-cyan-400 glitch-text">
|
|
CYBER
|
|
<span className="text-pink-500">CLOUD</span>
|
|
</div>
|
|
|
|
<div className="hidden md:flex space-x-8">
|
|
{[
|
|
{ key: 'products', href: '/products' },
|
|
{ key: 'security', href: '/security' },
|
|
{ key: 'datacenter', href: '/datacenter' },
|
|
{ key: 'support', href: '/support' },
|
|
{ key: 'console', href: '/console' },
|
|
].map((item) => (
|
|
<a
|
|
key={item.key}
|
|
href={`/${currentLang}${item.href}`}
|
|
className="hover:text-pink-400 transition-colors duration-300 relative group"
|
|
>
|
|
{t.nav[item.key as keyof typeof t.nav]}
|
|
<span className="absolute -bottom-1 left-0 w-0 h-0.5 bg-pink-500 group-hover:w-full transition-all duration-300"></span>
|
|
</a>
|
|
))}
|
|
</div>
|
|
|
|
{/* Language Switcher */}
|
|
<div className="flex space-x-2">
|
|
{[
|
|
{ code: 'zh', label: '简' },
|
|
{ code: 'tw', label: '繁' },
|
|
{ code: 'en', label: 'EN' },
|
|
].map((lang) => (
|
|
<button
|
|
key={lang.code}
|
|
onClick={() => switchLanguage(lang.code)}
|
|
className={`px-3 py-1 text-xs border rounded ${
|
|
currentLang === lang.code
|
|
? 'border-cyan-400 text-cyan-400'
|
|
: 'border-gray-600 text-gray-400 hover:border-cyan-400 hover:text-cyan-400'
|
|
} transition-colors duration-300`}
|
|
>
|
|
{lang.label}
|
|
</button>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
);
|
|
}
|