55 lines
1.7 KiB
TypeScript
55 lines
1.7 KiB
TypeScript
import { useState } from 'react';
|
|
import type { ComponentProps } from 'react';
|
|
import { Icon as IconComponent } from 'astro-icon/components';
|
|
|
|
// Create a wrapper component for Icon with proper TypeScript types
|
|
const Icon = ({ className, ...props }: ComponentProps<typeof IconComponent> & { className?: string }) => {
|
|
return <IconComponent {...props} class={className} />;
|
|
};
|
|
|
|
interface Language {
|
|
code: string;
|
|
name: string;
|
|
flag: string;
|
|
}
|
|
|
|
const languages: Language[] = [
|
|
{ code: 'en', name: 'English', flag: 'gb' },
|
|
{ code: 'nl', name: 'Dutch', flag: 'nl' },
|
|
{ code: 'de', name: 'German', flag: 'de' },
|
|
];
|
|
|
|
interface LanguageSelectorProps {
|
|
defaultLang: string;
|
|
}
|
|
|
|
export default function LanguageSelectorComponent({ defaultLang }: LanguageSelectorProps) {
|
|
const [currentLang] = useState<string>(defaultLang);
|
|
|
|
const handleLanguageSelect = (code: string) => {
|
|
if (code !== currentLang) {
|
|
window.location.href = `/${code}`;
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div className="flex items-center space-x-4">
|
|
{languages.map((language) => (
|
|
<button
|
|
key={language.code}
|
|
onClick={() => handleLanguageSelect(language.code)}
|
|
className={`
|
|
inline-flex items-center px-3 py-2 text-sm font-medium rounded-md
|
|
transition-colors duration-200 hover:bg-gray-100
|
|
${language.code === currentLang ? 'text-blue-600 bg-blue-50' : 'text-gray-600 hover:text-gray-900'}
|
|
`}
|
|
aria-current={language.code === currentLang ? 'page' : undefined}
|
|
>
|
|
<Icon name={`circle-flags:${language.flag}`} className="w-5 h-5 mr-2" aria-hidden="true" />
|
|
<span>{language.name}</span>
|
|
</button>
|
|
))}
|
|
</div>
|
|
);
|
|
}
|