VyacheslavShtyrlin
39 lines
1.1 KiB
TypeScript
39 lines
1.1 KiB
TypeScript
import "../sidebar/toolbar.css";
|
|
import { languageSlice } from "../../store/reducers/languageSlice";
|
|
import { useAppDispatch, useAppSelector } from "../../hooks/redux";
|
|
|
|
export const LanguagePopup: React.FC<any> = ({ setOpen }) => {
|
|
const { handleChangeLanguage } = languageSlice.actions;
|
|
|
|
const buttons = [{ value: "ru" }, { value: "en" }];
|
|
const dispatch = useAppDispatch();
|
|
|
|
const onChange = (value: string) => {
|
|
dispatch(handleChangeLanguage(value));
|
|
setOpen(false);
|
|
};
|
|
|
|
const { currentLang } = useAppSelector((state) => state.languageReducer);
|
|
|
|
return (
|
|
<div className="toolbar-language-popup">
|
|
{buttons.map((i) => (
|
|
<div className="toolbar-button-area">
|
|
<button
|
|
key={i.value}
|
|
value={i.value}
|
|
onClick={(e: any) => onChange(e.target.value)}
|
|
className={
|
|
currentLang === i.value
|
|
? "toolbar-button toolbar-button-active"
|
|
: "toolbar-button"
|
|
}
|
|
>
|
|
{i.value.toUpperCase()}
|
|
</button>
|
|
</div>
|
|
))}
|
|
</div>
|
|
);
|
|
};
|