34 lines
931 B
TypeScript
34 lines
931 B
TypeScript
import React, {useMemo} from 'react';
|
|
import {Button, Dropdown, type MenuProps} from 'antd';
|
|
import type { ButtonProps } from 'antd';
|
|
import { TranslationOutlined } from '@ant-design/icons';
|
|
import useLanguage from '@/hooks/useLanguage';
|
|
|
|
/**
|
|
* 语言切换器组件
|
|
*/
|
|
const LanguageSwitcher: React.FC<ButtonProps> = (props) => {
|
|
const { languageOptions, language, changeLanguage } = useLanguage();
|
|
|
|
/**
|
|
* 生成语言下拉菜单项
|
|
*/
|
|
const languageMenuItems = useMemo<MenuProps['items']>(() => {
|
|
return languageOptions.map((option) => ({
|
|
key: option.value,
|
|
label: option.label,
|
|
onClick: () => changeLanguage(option.value),
|
|
}));
|
|
}, [languageOptions, changeLanguage]);
|
|
|
|
return (
|
|
<>
|
|
<Dropdown menu={{ items: languageMenuItems, selectedKeys: [language] }}>
|
|
<Button icon={<TranslationOutlined />} {...props} />
|
|
</Dropdown>
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default LanguageSwitcher;
|