52 lines
1.5 KiB
TypeScript
52 lines
1.5 KiB
TypeScript
'use client';
|
|
|
|
import Link from 'next/link';
|
|
|
|
interface Language {
|
|
code: string;
|
|
name: string;
|
|
nativeName: string;
|
|
flag: string;
|
|
}
|
|
|
|
interface LanguageSwitcherProps {
|
|
currentLang: string;
|
|
}
|
|
|
|
const languages: Language[] = [
|
|
{ code: 'en', name: 'English', nativeName: 'English', flag: '🇺🇸' },
|
|
{ code: 'zh-CN', name: 'Chinese (Simplified)', nativeName: '简体中文', flag: '🇨🇳' },
|
|
];
|
|
|
|
export default function LanguageSwitcher({ currentLang }: LanguageSwitcherProps) {
|
|
const getLocalizedPath = (langCode: string) => {
|
|
if (langCode === 'en') {
|
|
return '/';
|
|
}
|
|
return `/${langCode}`;
|
|
};
|
|
|
|
const otherLanguages = languages.filter(lang => lang.code !== currentLang);
|
|
|
|
if (otherLanguages.length === 0) {
|
|
return null;
|
|
}
|
|
|
|
return (
|
|
<div className="flex items-center justify-center gap-3 mb-6">
|
|
<span className="text-sm text-gray-500">Switch language:</span>
|
|
<div className="flex gap-2">
|
|
{otherLanguages.map((lang) => (
|
|
<Link
|
|
key={lang.code}
|
|
href={getLocalizedPath(lang.code)}
|
|
className="flex items-center gap-2 px-3 py-1.5 bg-white rounded-lg shadow-sm hover:shadow-md border border-gray-200 hover:border-blue-300 transition-all duration-200 text-sm font-medium text-gray-700 hover:text-blue-700"
|
|
>
|
|
<span className="text-base">{lang.flag}</span>
|
|
<span>{lang.nativeName}</span>
|
|
</Link>
|
|
))}
|
|
</div>
|
|
</div>
|
|
);
|
|
} |