first commit

components/layout/ui/LanguageSelector.tsx

@@ -0,0 +1,80 @@
+"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] md:h-10! flex items-center justify-center rounded-lg 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>
+  );
+}