60 lines
1.6 KiB
TypeScript
60 lines
1.6 KiB
TypeScript
"use client"
|
|
import { useRouter } from "next/navigation"
|
|
import Image from "next/image"
|
|
import { useLocale } from "next-intl"
|
|
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
|
|
import tm from "@/public/tm.png"
|
|
import ru from "@/public/ru.png"
|
|
|
|
interface Language {
|
|
code: string
|
|
name: string
|
|
flag: any
|
|
}
|
|
|
|
const LANGUAGES: Language[] = [
|
|
{ code: "ru", name: "Russian", flag: ru },
|
|
{ code: "tm", name: "Turkmen", flag: tm },
|
|
]
|
|
|
|
export default function LanguageSelector() {
|
|
const locale = useLocale()
|
|
const router = useRouter()
|
|
|
|
const handleLanguageChange = (newLocale: string) => {
|
|
router.push(`/${newLocale}`)
|
|
}
|
|
|
|
return (
|
|
<Select value={locale} onValueChange={handleLanguageChange}>
|
|
<SelectTrigger className="w-[70px] rounded-xl border-gray-300">
|
|
<SelectValue>
|
|
<FlagIcon locale={locale} />
|
|
</SelectValue>
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
{LANGUAGES.map((language) => (
|
|
<SelectItem key={language.code} value={language.code}>
|
|
<div className="flex items-center gap-2">
|
|
<FlagIcon locale={language.code} />
|
|
<span>{language.name}</span>
|
|
</div>
|
|
</SelectItem>
|
|
))}
|
|
</SelectContent>
|
|
</Select>
|
|
)
|
|
}
|
|
|
|
function FlagIcon({ locale }: { locale: string }) {
|
|
const language = LANGUAGES.find((lang) => lang.code === locale)
|
|
|
|
if (!language) return null
|
|
|
|
return (
|
|
<div className="relative h-5 w-7">
|
|
<Image src={language.flag || "/placeholder.svg"} alt={language.name} fill className="object-cover rounded" />
|
|
</div>
|
|
)
|
|
}
|