diff --git a/app/(core)/components/Header.jsx b/app/(core)/components/Header.jsx
index 12456db..6f9d682 100644
--- a/app/(core)/components/Header.jsx
+++ b/app/(core)/components/Header.jsx
@@ -10,7 +10,7 @@ import { useSticky } from "../hooks/useSticky";
import { useTheme } from "../hooks/useTheme";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faHamburger } from "@fortawesome/free-solid-svg-icons";
-import GoogleTranslator from "./GoogleTranslator.jsx";
+import LanguageSwitcher from "./LanguageSwitcher.jsx";
import { usePathname } from "next/navigation.js";
export default function Header() {
@@ -129,8 +129,8 @@ export default function Header() {
-
+
diff --git a/app/(core)/components/LanguageSwitcher.jsx b/app/(core)/components/LanguageSwitcher.jsx
new file mode 100644
index 0000000..807d55f
--- /dev/null
+++ b/app/(core)/components/LanguageSwitcher.jsx
@@ -0,0 +1,131 @@
+"use client";
+
+import React, { useCallback, useEffect, useRef, useState } from "react";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faLanguage, faChevronDown } from "@fortawesome/free-solid-svg-icons";
+import useTranslation from "../hooks/useTranslation.ts";
+import "../styles/translator.css";
+
+const LANGUAGES = {
+ en: "English",
+ ru: "Русский",
+};
+
+const getStoredLang = () => {
+ if (typeof document === "undefined") return "en";
+ const value = `; ${document.cookie}`;
+ const parts = value.split("; googtrans=");
+ if (parts.length === 2) {
+ const cookie = parts.pop()?.split(";").shift();
+ if (cookie) {
+ const segments = cookie.split("/");
+ if (segments.length >= 3 && LANGUAGES[segments[2]]) {
+ return segments[2];
+ }
+ }
+ }
+ return "en";
+};
+
+const setLangCookie = (languageCode) => {
+ const hostname = window.location.hostname;
+ const isLocal = hostname === "localhost" || hostname === "127.0.0.1";
+ const domainAttr = isLocal ? "" : `; domain=.${hostname}`;
+ document.cookie = `googtrans=/en/${languageCode}; path=/${domainAttr}; SameSite=Lax`;
+};
+
+export default function LanguageSwitcher() {
+ const { t, meta } = useTranslation();
+ const isCompleted = meta?.completed || false;
+ const [currentLanguage, setCurrentLanguage] = useState("en");
+ const [open, setOpen] = useState(false);
+ const containerRef = useRef(null);
+
+ useEffect(() => {
+ setCurrentLanguage(getStoredLang());
+ }, []);
+
+ useEffect(() => {
+ if (typeof document === "undefined") return;
+ document.documentElement.lang = currentLanguage === "ru" ? "ru" : "en";
+ }, [currentLanguage]);
+
+ const changeLanguage = useCallback((languageCode) => {
+ setCurrentLanguage(languageCode);
+ setLangCookie(languageCode);
+ setOpen(false);
+
+ window.dispatchEvent(
+ new CustomEvent("gtrans:languagechange", {
+ detail: { lang: languageCode },
+ })
+ );
+ }, []);
+
+ useEffect(() => {
+ if (!open) return;
+
+ const handleClickOutside = (event) => {
+ if (
+ containerRef.current &&
+ !containerRef.current.contains(event.target)
+ ) {
+ setOpen(false);
+ }
+ };
+
+ const handleEscape = (event) => {
+ if (event.key === "Escape") setOpen(false);
+ };
+
+ document.addEventListener("mousedown", handleClickOutside);
+ document.addEventListener("keydown", handleEscape);
+ return () => {
+ document.removeEventListener("mousedown", handleClickOutside);
+ document.removeEventListener("keydown", handleEscape);
+ };
+ }, [open]);
+
+ return (
+
+
+
+ {open ? (
+
+ {Object.entries(LANGUAGES).map(([code, name]) => (
+ -
+
+
+ ))}
+
+ ) : null}
+