85 lines
2.3 KiB
TypeScript
85 lines
2.3 KiB
TypeScript
"use client";
|
|
import { useRouter, usePathname } from "next/navigation";
|
|
import Image from "next/image";
|
|
import { useLocale } from "next-intl";
|
|
import { useQueryClient } from "@tanstack/react-query";
|
|
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 pathname = usePathname();
|
|
const queryClient = useQueryClient();
|
|
|
|
const handleLanguageChange = async (newLocale: string) => {
|
|
if (typeof window !== "undefined") {
|
|
(window as any).i18n = { language: newLocale };
|
|
}
|
|
|
|
queryClient.invalidateQueries();
|
|
|
|
const currentPath = pathname.replace(`/${locale}`, "");
|
|
router.replace(`/${newLocale}${currentPath}`);
|
|
};
|
|
|
|
return (
|
|
<Select value={locale} onValueChange={handleLanguageChange}>
|
|
<SelectTrigger className="w-[70px] h-10! flex items-center justify-center border-gray-200 hover:border-gray-900 hover:bg-gray-50 transition-all duration-200 shadow-sm">
|
|
<SelectValue>
|
|
<FlagIcon locale={locale} />
|
|
</SelectValue>
|
|
</SelectTrigger>
|
|
<SelectContent className=" border-gray-200 shadow-lg">
|
|
{LANGUAGES.map((language) => (
|
|
<SelectItem
|
|
key={language.code}
|
|
value={language.code}
|
|
className="rounded-lg cursor-pointer hover:bg-gray-100 transition-colors"
|
|
>
|
|
<div className="flex items-center gap-3">
|
|
<FlagIcon locale={language.code} />
|
|
<span className="font-medium">{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 overflow-hidden shadow-sm">
|
|
<Image
|
|
src={language.flag || "/placeholder.svg"}
|
|
alt={language.name}
|
|
fill
|
|
className="object-cover"
|
|
/>
|
|
</div>
|
|
);
|
|
}
|