40 lines
1.3 KiB
TypeScript
40 lines
1.3 KiB
TypeScript
'use client'
|
|
|
|
import { useLocale } from 'next-intl'
|
|
import { useRouter, usePathname } from '@/i18n/routing'
|
|
import { ChangeEvent } from 'react'
|
|
import { cn } from '@/lib/utils'
|
|
import { Globe } from 'lucide-react'
|
|
|
|
export default function LocaleSwitcher({ scrolled }: { scrolled: boolean }) {
|
|
const locale = useLocale()
|
|
const router = useRouter()
|
|
const pathname = usePathname()
|
|
|
|
const onSelectChange = (e: ChangeEvent<HTMLSelectElement>) => {
|
|
const nextLocale = e.target.value
|
|
router.replace({ pathname }, { locale: nextLocale as any })
|
|
}
|
|
|
|
return (
|
|
<div className="relative flex items-center">
|
|
<Globe className={cn(
|
|
"w-4 h-4 absolute left-2 pointer-events-none transition-colors",
|
|
scrolled ? "text-foreground" : "text-white"
|
|
)} />
|
|
<select
|
|
value={locale}
|
|
onChange={onSelectChange}
|
|
className={cn(
|
|
"appearance-none bg-transparent border-none py-1 pl-8 pr-4 text-sm font-medium focus:ring-0 focus:outline-none cursor-pointer uppercase transition-colors",
|
|
scrolled ? "text-foreground" : "text-white"
|
|
)}
|
|
>
|
|
<option value="tr" className="text-foreground">TR</option>
|
|
<option value="en" className="text-foreground">EN</option>
|
|
<option value="de" className="text-foreground">DE</option>
|
|
</select>
|
|
</div>
|
|
)
|
|
}
|