68 lines
2.2 KiB
TypeScript
68 lines
2.2 KiB
TypeScript
'use client'
|
|
|
|
import { useRouter } from 'next/navigation'
|
|
import { usePathname } from 'next/navigation'
|
|
import { useEffect, useState } from 'react'
|
|
import Cookies from 'js-cookie'
|
|
|
|
const defaultLocale = 'de'
|
|
|
|
const languages = [
|
|
{ code: 'de', name: 'Deutsch', flag: '🇩🇪' },
|
|
{ code: 'tr', name: 'Türkçe', flag: '🇹🇷' },
|
|
{ code: 'en', name: 'English', flag: '🇬🇧' },
|
|
{ code: 'fr', name: 'Français', flag: '🇫🇷' }
|
|
]
|
|
|
|
export default function LanguageSelector() {
|
|
const router = useRouter()
|
|
const pathname = usePathname()
|
|
const [currentLang, setCurrentLang] = useState(defaultLocale)
|
|
const [isOpen, setIsOpen] = useState(false)
|
|
|
|
useEffect(() => {
|
|
const savedLang = Cookies.get('NEXT_LOCALE') || defaultLocale
|
|
setCurrentLang(savedLang)
|
|
}, [])
|
|
|
|
const handleLanguageChange = (langCode: string) => {
|
|
Cookies.set('NEXT_LOCALE', langCode)
|
|
setCurrentLang(langCode)
|
|
setIsOpen(false)
|
|
router.refresh()
|
|
}
|
|
|
|
const currentLanguage = languages.find(lang => lang.code === currentLang)
|
|
|
|
return (
|
|
<div className="relative">
|
|
<button
|
|
onClick={() => setIsOpen(!isOpen)}
|
|
className="flex items-center space-x-2 px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-md hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
|
|
>
|
|
<span>{currentLanguage?.flag}</span>
|
|
<span>{currentLanguage?.name}</span>
|
|
</button>
|
|
|
|
{isOpen && (
|
|
<div className="absolute right-0 mt-2 w-48 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5">
|
|
<div className="py-1" role="menu" aria-orientation="vertical">
|
|
{languages.map((language) => (
|
|
<button
|
|
key={language.code}
|
|
onClick={() => handleLanguageChange(language.code)}
|
|
className={`w-full text-left px-4 py-2 text-sm hover:bg-gray-100 ${
|
|
currentLang === language.code ? 'bg-gray-50 text-indigo-600' : 'text-gray-700'
|
|
}`}
|
|
role="menuitem"
|
|
>
|
|
<span className="mr-2">{language.flag}</span>
|
|
{language.name}
|
|
</button>
|
|
))}
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
)
|
|
}
|