Improve MineGeo interface and functionality

components/LanguageSwitcher.tsx

@@ -0,0 +1,40 @@
+"use client";
+import { useTransition } from "react";
+import { useRouter } from "next/navigation";
+import { Globe2 } from "lucide-react";
+import { languageCookie, type LanguagePreference } from "@/shared/i18n";
+import { useI18n } from "./I18nProvider";
+
+export function LanguageSwitcher() {
+  const { t, preference, detectedLocale } = useI18n();
+  const [pending, startTransition] = useTransition();
+  const router = useRouter();
+  function changeLanguage(value: LanguagePreference) {
+    document.cookie = `${languageCookie}=${value}; Path=/; Max-Age=31536000; SameSite=Lax${location.protocol === "https:" ? "; Secure" : ""}`;
+    startTransition(() => router.refresh());
+  }
+  return (
+    <label className="language-switcher" aria-busy={pending}>
+      <Globe2 size={16} aria-hidden="true" />
+      <span className="sr-only">{t("Site language")}</span>
+      <select
+        aria-label={t("Site language")}
+        value={preference}
+        disabled={pending}
+        onChange={(event) =>
+          changeLanguage(event.target.value as LanguagePreference)
+        }
+      >
+        <option value="auto">
+          {t("Automatic")} · {detectedLocale === "ru" ? "RU" : "EN"}
+        </option>
+        <option value="en" lang="en">
+          English
+        </option>
+        <option value="ru" lang="ru">
+          Русский
+        </option>
+      </select>
+    </label>
+  );
+}