diff --git a/package-lock.json b/package-lock.json
index 92a5faa..efbd6b4 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,6 +8,10 @@
"name": "freeland",
"version": "0.1.0",
"dependencies": {
+ "@fortawesome/fontawesome-svg-core": "^6.2.0",
+ "@fortawesome/free-brands-svg-icons": "^6.2.0",
+ "@fortawesome/free-solid-svg-icons": "^6.2.0",
+ "@fortawesome/react-fontawesome": "^0.2.0",
"@headlessui/react": "^1.6.6",
"@reduxjs/toolkit": "^1.8.3",
"@types/node": "^16.11.47",
@@ -2382,6 +2386,63 @@
"js-yaml": "bin/js-yaml.js"
}
},
+ "node_modules/@fortawesome/fontawesome-common-types": {
+ "version": "6.2.0",
+ "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-6.2.0.tgz",
+ "integrity": "sha512-rBevIsj2nclStJ7AxTdfsa3ovHb1H+qApwrxcTVo+NNdeJiB9V75hsKfrkG5AwNcRUNxrPPiScGYCNmLMoh8pg==",
+ "hasInstallScript": true,
+ "engines": {
+ "node": ">=6"
+ }
+ },
+ "node_modules/@fortawesome/fontawesome-svg-core": {
+ "version": "6.2.0",
+ "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-6.2.0.tgz",
+ "integrity": "sha512-Cf2mAAeMWFMzpLC7Y9H1I4o3wEU+XovVJhTiNG8ZNgSQj53yl7OCJaS80K4YjrABWZzbAHVaoHE1dVJ27AAYXw==",
+ "hasInstallScript": true,
+ "dependencies": {
+ "@fortawesome/fontawesome-common-types": "6.2.0"
+ },
+ "engines": {
+ "node": ">=6"
+ }
+ },
+ "node_modules/@fortawesome/free-brands-svg-icons": {
+ "version": "6.2.0",
+ "resolved": "https://registry.npmjs.org/@fortawesome/free-brands-svg-icons/-/free-brands-svg-icons-6.2.0.tgz",
+ "integrity": "sha512-fm1y4NyZ2qKYNmYhdMz9VAWRw1Et7PMHNunSw3W0SVAwKwv6o0qiJworLH3Y9SnmhHzAymXJwCX1op22FFvGiA==",
+ "hasInstallScript": true,
+ "dependencies": {
+ "@fortawesome/fontawesome-common-types": "6.2.0"
+ },
+ "engines": {
+ "node": ">=6"
+ }
+ },
+ "node_modules/@fortawesome/free-solid-svg-icons": {
+ "version": "6.2.0",
+ "resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-6.2.0.tgz",
+ "integrity": "sha512-UjCILHIQ4I8cN46EiQn0CZL/h8AwCGgR//1c4R96Q5viSRwuKVo0NdQEc4bm+69ZwC0dUvjbDqAHF1RR5FA3XA==",
+ "hasInstallScript": true,
+ "dependencies": {
+ "@fortawesome/fontawesome-common-types": "6.2.0"
+ },
+ "engines": {
+ "node": ">=6"
+ }
+ },
+ "node_modules/@fortawesome/react-fontawesome": {
+ "version": "0.2.0",
+ "resolved": "https://registry.npmjs.org/@fortawesome/react-fontawesome/-/react-fontawesome-0.2.0.tgz",
+ "integrity": "sha512-uHg75Rb/XORTtVt7OS9WoK8uM276Ufi7gCzshVWkUJbHhh3svsUUeqXerrM96Wm7fRiDzfKRwSoahhMIkGAYHw==",
+ "dependencies": {
+ "prop-types": "^15.8.1"
+ },
+ "peerDependencies": {
+ "@fortawesome/fontawesome-svg-core": "~1 || ~6",
+ "react": ">=16.3"
+ }
+ },
"node_modules/@gar/promisify": {
"version": "1.1.3",
"resolved": "https://registry.npmjs.org/@gar/promisify/-/promisify-1.1.3.tgz",
@@ -41454,6 +41515,43 @@
}
}
},
+ "@fortawesome/fontawesome-common-types": {
+ "version": "6.2.0",
+ "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-6.2.0.tgz",
+ "integrity": "sha512-rBevIsj2nclStJ7AxTdfsa3ovHb1H+qApwrxcTVo+NNdeJiB9V75hsKfrkG5AwNcRUNxrPPiScGYCNmLMoh8pg=="
+ },
+ "@fortawesome/fontawesome-svg-core": {
+ "version": "6.2.0",
+ "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-6.2.0.tgz",
+ "integrity": "sha512-Cf2mAAeMWFMzpLC7Y9H1I4o3wEU+XovVJhTiNG8ZNgSQj53yl7OCJaS80K4YjrABWZzbAHVaoHE1dVJ27AAYXw==",
+ "requires": {
+ "@fortawesome/fontawesome-common-types": "6.2.0"
+ }
+ },
+ "@fortawesome/free-brands-svg-icons": {
+ "version": "6.2.0",
+ "resolved": "https://registry.npmjs.org/@fortawesome/free-brands-svg-icons/-/free-brands-svg-icons-6.2.0.tgz",
+ "integrity": "sha512-fm1y4NyZ2qKYNmYhdMz9VAWRw1Et7PMHNunSw3W0SVAwKwv6o0qiJworLH3Y9SnmhHzAymXJwCX1op22FFvGiA==",
+ "requires": {
+ "@fortawesome/fontawesome-common-types": "6.2.0"
+ }
+ },
+ "@fortawesome/free-solid-svg-icons": {
+ "version": "6.2.0",
+ "resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-6.2.0.tgz",
+ "integrity": "sha512-UjCILHIQ4I8cN46EiQn0CZL/h8AwCGgR//1c4R96Q5viSRwuKVo0NdQEc4bm+69ZwC0dUvjbDqAHF1RR5FA3XA==",
+ "requires": {
+ "@fortawesome/fontawesome-common-types": "6.2.0"
+ }
+ },
+ "@fortawesome/react-fontawesome": {
+ "version": "0.2.0",
+ "resolved": "https://registry.npmjs.org/@fortawesome/react-fontawesome/-/react-fontawesome-0.2.0.tgz",
+ "integrity": "sha512-uHg75Rb/XORTtVt7OS9WoK8uM276Ufi7gCzshVWkUJbHhh3svsUUeqXerrM96Wm7fRiDzfKRwSoahhMIkGAYHw==",
+ "requires": {
+ "prop-types": "^15.8.1"
+ }
+ },
"@gar/promisify": {
"version": "1.1.3",
"resolved": "https://registry.npmjs.org/@gar/promisify/-/promisify-1.1.3.tgz",
diff --git a/package.json b/package.json
index 5d32e57..2f2a7f1 100755
--- a/package.json
+++ b/package.json
@@ -3,6 +3,10 @@
"version": "0.1.0",
"private": true,
"dependencies": {
+ "@fortawesome/fontawesome-svg-core": "^6.2.0",
+ "@fortawesome/free-brands-svg-icons": "^6.2.0",
+ "@fortawesome/free-solid-svg-icons": "^6.2.0",
+ "@fortawesome/react-fontawesome": "^0.2.0",
"@headlessui/react": "^1.6.6",
"@reduxjs/toolkit": "^1.8.3",
"@types/node": "^16.11.47",
diff --git a/src/components/LocalizationButton.tsx b/src/components/LocalizationButton.tsx
new file mode 100644
index 0000000..c6f596b
--- /dev/null
+++ b/src/components/LocalizationButton.tsx
@@ -0,0 +1,90 @@
+import React, { Fragment, useState } from "react";
+import { Trans, useTranslation } from "react-i18next";
+
+import { Button } from "./Button/Button";
+import { Menu, Transition } from "@headlessui/react";
+import classNames from "classnames";
+
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faLanguage } from "@fortawesome/free-solid-svg-icons";
+
+type Props = React.ComponentPropsWithoutRef<"div">;
+
+const LocalizationButton = (props: Props) => {
+ const { t, i18n } = useTranslation();
+ const changeLanguage = (lng: string) => {
+ i18n.changeLanguage(lng);
+ setLanguage(lng);
+ };
+ const [language, setLanguage] = useState("en");
+ return (
+ <div {...props}>
+ <Menu as="div" className="relative inline-block text-left">
+ <div>
+ <Menu.Button
+ as={Button}
+ emphasis="low"
+ className="flex items-center gap-2 border"
+ >
+ <div className=" w-4">
+ <FontAwesomeIcon icon={faLanguage} />
+ </div>
+ {/* {language} */}
+ </Menu.Button>
+ </div>
+
+ <Transition
+ as={Fragment}
+ enter="transition ease-out duration-100"
+ enterFrom="transform opacity-0 scale-95"
+ enterTo="transform opacity-100 scale-100"
+ leave="transition ease-in duration-75"
+ leaveFrom="transform opacity-100 scale-100"
+ leaveTo="transform opacity-0 scale-95"
+ >
+ <Menu.Items
+ className="origin-top-right absolute right-0 mt-5 w-12 rounded-md
+ shadow-lg bg-white ring-1 ring-black ring-opacity-5 focus:outline-none"
+ >
+ <div className="py-1">
+ <Menu.Item>
+ {({ active }) => (
+ <a
+ onClick={() => {
+ changeLanguage("en");
+ }}
+ href="#"
+ className={classNames(
+ active ? "bg-gray-100 text-gray-900" : "text-gray-700",
+ "block px-4 py-2 text-sm"
+ )}
+ >
+ En
+ </a>
+ )}
+ </Menu.Item>
+ <Menu.Item>
+ {({ active }) => (
+ <a
+ onClick={() => {
+ changeLanguage("ru");
+ }}
+ href="#"
+ className={classNames(
+ active ? "bg-gray-100 text-gray-900" : "text-gray-700",
+ "block px-4 py-2 text-sm"
+ )}
+ >
+ Ru
+ </a>
+ )}
+ </Menu.Item>
+ </div>
+ </Menu.Items>
+ </Transition>
+ </Menu>
+ </div>
+ );
+};
+
+export default LocalizationButton;
diff --git a/src/localization/i18n.ts b/src/localization/i18n.ts
index d735183..dd4c454 100755
--- a/src/localization/i18n.ts
+++ b/src/localization/i18n.ts
@@ -22,7 +22,7 @@ const fallbackLng: Langs = "ru";
i18n
.use(Backend)
- // .use(LanguageDetector)
+ .use(LanguageDetector)
.use(initReactI18next)
.init({
debug: process.env.NODE_ENV === "development" ? true : false,