paul
2012b0bab9
- Added default_language field to general settings state in SettingsPage - Replaced LanguageSelector component with simple select dropdown on settings page - Fixed public settings endpoint to read general_default_language from database - Language setting now properly saved when clicking Save Settings button - Setting is correctly used by gallery login page and legal pages 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
54 lines
1.8 KiB
TypeScript
54 lines
1.8 KiB
TypeScript
import React from 'react';
|
|
import { useTranslation } from 'react-i18next';
|
|
import { Globe } from 'lucide-react';
|
|
|
|
const languages = [
|
|
{ code: 'en', name: 'English', flag: '🇬🇧' },
|
|
{ code: 'de', name: 'Deutsch', flag: '🇩🇪' },
|
|
];
|
|
|
|
export const LanguageSelector: React.FC = () => {
|
|
const { i18n } = useTranslation();
|
|
const [isOpen, setIsOpen] = React.useState(false);
|
|
|
|
const currentLanguage = languages.find(lang => lang.code === i18n.language) || languages[0];
|
|
|
|
const handleLanguageChange = (languageCode: string) => {
|
|
i18n.changeLanguage(languageCode);
|
|
setIsOpen(false);
|
|
};
|
|
|
|
return (
|
|
<div className="relative">
|
|
<button
|
|
onClick={() => setIsOpen(!isOpen)}
|
|
className="flex items-center gap-2 px-3 py-2 text-sm font-medium text-neutral-700 bg-white border border-neutral-300 rounded-lg hover:bg-neutral-50 focus:outline-none focus:ring-2 focus:ring-primary-500"
|
|
>
|
|
<Globe className="w-4 h-4" />
|
|
<span>{currentLanguage.flag}</span>
|
|
<span>{currentLanguage.name}</span>
|
|
</button>
|
|
|
|
{isOpen && (
|
|
<div className="absolute right-0 mt-2 w-48 bg-white rounded-lg shadow-lg border border-neutral-200 py-1 z-50">
|
|
{languages.map((language) => (
|
|
<button
|
|
key={language.code}
|
|
onClick={() => handleLanguageChange(language.code)}
|
|
className={`w-full text-left px-4 py-2 text-sm hover:bg-neutral-50 flex items-center gap-3 ${
|
|
language.code === i18n.language
|
|
? 'text-primary-600 bg-primary-50'
|
|
: 'text-neutral-700'
|
|
}`}
|
|
>
|
|
<span className="text-lg">{language.flag}</span>
|
|
<span>{language.name}</span>
|
|
</button>
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
LanguageSelector.displayName = 'LanguageSelector'; |