translate

import { DownOutlined } from "@ant-design/icons";  
import { useGetLocale, useSetLocale } from "@refinedev/core";  
import { Avatar, Button, Dropdown, Layout, Menu, Space } from "antd";  
import { useTranslation } from "react-i18next";  
  
export const Header: React.FC = () => {  
 const { i18n } = useTranslation();  
 const locale = useGetLocale();  
 const changeLanguage = useSetLocale();  
  
 const currentLocale = locale();  
  
 const menu = (  
 <Menu selectedKeys={currentLocale ? [currentLocale] : []}>  
 {[...(i18n.languages || [])].sort().map((lang: string) => (  
 <Menu.Item  
 key={lang}  
 onClick={() => changeLanguage(lang)}  
 icon={  
 <span style={{ marginRight: 8 }}>  
 <Avatar size={16} src={`/images/flags/${lang}.svg`} />  
 </span>  
 }  
 >  
 {lang === "en" ? "English" : "German"}  
 </Menu.Item>  
 ))}  
 </Menu>  
 );  
  
 return (  
 <Layout.Header  
 style={{  
 display: "flex",  
 justifyContent: "flex-end",  
 alignItems: "center",  
 padding: "0px 24px",  
 height: "48px",  
 backgroundColor: "#FFF",  
 }}  
 >  
 <Dropdown overlay={menu}>  
 <Button type="link">  
 <Space>  
 <Avatar size={16} src={`/images/flags/${currentLocale}.svg`} />  
 {currentLocale === "en" ? "English" : "German"}  
 <DownOutlined />  
 </Space>  
 </Button>  
 </Dropdown>  
 </Layout.Header>  
 );  
};

import { Refine, Resource } from "@refinedev/core";  
import { ThemedLayoutV2 } from "@refinedev/antd";  
import { useTranslation } from "react-i18next";  
import "./i18n";  
import { Header } from "components";  
  
const App: React.FC = () => {  
 const { t, i18n } = useTranslation();  
 const i18nProvider = {  
 translate: (key: string, options?: any) => t(key, options),  
 changeLocale: (lang: string) => i18n.changeLanguage(lang),  
 getLocale: () => i18n.language,  
 };  
  
 return (  
 <Refine  
 i18nProvider={i18nProvider}  
 /* ... */  
 >  
 <ThemedLayoutV2  
 header={<Header />}  
 >  
 {/* ... */}  
 </ThemedLayoutV2>  
 </Refine>  
 );  
};