90 lines
2.7 KiB
TypeScript
Executable File
90 lines
2.7 KiB
TypeScript
Executable File
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");
|
|
}}
|
|
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");
|
|
}}
|
|
|
|
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;
|