Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 | 1x 16x 16x 16x 16x 16x 16x 12x 12x 12x 16x 16x 16x | /**
* Language Selector Component
* Dropdown for selecting the application language
*/
import React, { useState, useRef, useEffect } from 'react';
import { useTranslation } from 'react-i18next';
import { Globe, Check, ChevronDown } from 'lucide-react';
import { supportedLanguages, SupportedLanguage } from '../i18n';
interface LanguageSelectorProps {
variant?: 'dropdown' | 'inline';
showFlag?: boolean;
className?: string;
}
const LanguageSelector: React.FC<LanguageSelectorProps> = ({
variant = 'dropdown',
showFlag = true,
className = '',
}) => {
const { i18n } = useTranslation();
const [isOpen, setIsOpen] = useState(false);
const dropdownRef = useRef<HTMLDivElement>(null);
const currentLanguage = supportedLanguages.find(
(lang) => lang.code === i18n.language
) || supportedLanguages[0];
useEffect(() => {
const handleClickOutside = (event: MouseEvent) => {
if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) {
setIsOpen(false);
}
};
document.addEventListener('mousedown', handleClickOutside);
return () => document.removeEventListener('mousedown', handleClickOutside);
}, []);
const handleLanguageChange = (code: SupportedLanguage) => {
i18n.changeLanguage(code);
setIsOpen(false);
};
Iif (variant === 'inline') {
return (
<div className={`flex flex-wrap gap-2 ${className}`}>
{supportedLanguages.map((lang) => (
<button
key={lang.code}
onClick={() => handleLanguageChange(lang.code)}
className={`px-3 py-1.5 rounded-lg text-sm font-medium transition-colors ${
i18n.language === lang.code
? 'bg-brand-600 text-white'
: 'bg-gray-100 text-gray-700 hover:bg-gray-200 dark:bg-gray-700 dark:text-gray-300 dark:hover:bg-gray-600'
}`}
>
{showFlag && <span className="mr-1.5">{lang.flag}</span>}
{lang.name}
</button>
))}
</div>
);
}
return (
<div ref={dropdownRef} className={`relative ${className}`}>
<button
onClick={() => setIsOpen(!isOpen)}
className="flex items-center gap-2 px-3 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-brand-500 transition-colors"
aria-expanded={isOpen}
aria-haspopup="listbox"
>
<Globe className="w-4 h-4" />
{showFlag && <span>{currentLanguage.flag}</span>}
<span className="hidden sm:inline">{currentLanguage.name}</span>
<ChevronDown className={`w-4 h-4 transition-transform ${isOpen ? 'rotate-180' : ''}`} />
</button>
{isOpen && (
<div className="absolute right-0 mt-2 w-48 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg shadow-lg z-[60] py-1 animate-in fade-in slide-in-from-top-2">
<ul role="listbox" aria-label="Select language">
{supportedLanguages.map((lang) => (
<li key={lang.code}>
<button
onClick={() => handleLanguageChange(lang.code)}
className={`w-full flex items-center gap-3 px-4 py-2 text-sm text-left transition-colors ${
i18n.language === lang.code
? 'bg-brand-50 dark:bg-brand-900/20 text-brand-700 dark:text-brand-300'
: 'text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700'
}`}
role="option"
aria-selected={i18n.language === lang.code}
>
<span className="text-lg">{lang.flag}</span>
<span className="flex-1">{lang.name}</span>
{i18n.language === lang.code && (
<Check className="w-4 h-4 text-brand-600 dark:text-brand-400" />
)}
</button>
</li>
))}
</ul>
</div>
)}
</div>
);
};
export default LanguageSelector;
|