55 lines
1.4 KiB
TypeScript
55 lines
1.4 KiB
TypeScript
import React, { memo } from "react";
|
|
import type { MenuProps } from "antd";
|
|
import { Button, Dropdown, Space } from "antd";
|
|
import { useChangeLanguage } from "../../Hooks/useChangeLanguage";
|
|
import { useTranslation } from "react-i18next";
|
|
const Translate: React.FC = () => {
|
|
const { currentLanguage, changeLanguage } = useChangeLanguage();
|
|
const { t } = useTranslation();
|
|
|
|
const EnLanguage = memo(() => (
|
|
<div className="MenuChange" onClick={EnLanguageClickHandler}>
|
|
<img alt="" src="../Layout/En.svg" width={20} height={20} />
|
|
{t("En")}
|
|
</div>
|
|
));
|
|
|
|
const ArLanguage = memo(() => (
|
|
<div className="MenuChange" onClick={ArLanguageClickHandler}>
|
|
<img alt="" src="../Layout/Ar.svg" width={20} height={20} />
|
|
{t("Ar")}
|
|
</div>
|
|
));
|
|
|
|
const EnLanguageClickHandler = React.useCallback(() => {
|
|
changeLanguage("en");
|
|
}, [changeLanguage]);
|
|
|
|
const ArLanguageClickHandler = React.useCallback(() => {
|
|
changeLanguage("ar");
|
|
}, [changeLanguage]);
|
|
|
|
const items: MenuProps["items"] = [
|
|
{
|
|
key: "1",
|
|
label: <EnLanguage />,
|
|
},
|
|
{
|
|
key: "2",
|
|
label: <ArLanguage />,
|
|
},
|
|
];
|
|
|
|
return (
|
|
<Space direction="vertical">
|
|
<Dropdown menu={{ items }} placement="top">
|
|
<Button disabled>
|
|
{currentLanguage === "en" ? <EnLanguage /> : <ArLanguage />}
|
|
</Button>
|
|
</Dropdown>
|
|
</Space>
|
|
);
|
|
};
|
|
|
|
export default Translate;
|