79 lines
2.3 KiB
TypeScript
79 lines
2.3 KiB
TypeScript
import { useTranslate } from '@/hooks/common-hooks';
|
|
import { DownOutlined } from '@ant-design/icons';
|
|
import { Dropdown, MenuProps, Space } from 'antd';
|
|
import camelCase from 'lodash/camelCase';
|
|
import React from 'react';
|
|
import User from '../user';
|
|
|
|
import { useTheme } from '@/components/theme-provider';
|
|
import { LanguageList, LanguageMap } from '@/constants/common';
|
|
import { useChangeLanguage } from '@/hooks/logic-hooks';
|
|
import { useFetchUserInfo } from '@/hooks/user-setting-hooks';
|
|
import { MoonIcon, SunIcon } from 'lucide-react';
|
|
import styled from './index.less';
|
|
|
|
const Circle = ({ children, ...restProps }: React.PropsWithChildren) => {
|
|
return (
|
|
<div {...restProps} className={styled.circle}>
|
|
{children}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
const RightToolBar = () => {
|
|
const { t } = useTranslate('common');
|
|
const changeLanguage = useChangeLanguage();
|
|
const { setTheme, theme } = useTheme();
|
|
|
|
const {
|
|
data: { language = '简体中文' },
|
|
} = useFetchUserInfo();
|
|
|
|
const handleItemClick: MenuProps['onClick'] = ({ key }) => {
|
|
changeLanguage(key);
|
|
};
|
|
|
|
const items: MenuProps['items'] = LanguageList.map((x) => ({
|
|
key: x,
|
|
label: <span>{LanguageMap[x as keyof typeof LanguageMap]}</span>,
|
|
})).reduce<MenuProps['items']>((pre, cur) => {
|
|
return [...pre!, { type: 'divider' }, cur];
|
|
}, []);
|
|
|
|
const onMoonClick = React.useCallback(() => {
|
|
setTheme('light');
|
|
}, [setTheme]);
|
|
const onSunClick = React.useCallback(() => {
|
|
setTheme('dark');
|
|
}, [setTheme]);
|
|
|
|
return (
|
|
<div className={styled.toolbarWrapper}>
|
|
<Space wrap size={16}>
|
|
<Dropdown menu={{ items, onClick: handleItemClick }} placement="bottom">
|
|
<Space className={styled.language}>
|
|
<b>{t(camelCase(language))}</b>
|
|
<DownOutlined />
|
|
</Space>
|
|
</Dropdown>
|
|
{/* <Circle>
|
|
<GithubOutlined onClick={handleGithubCLick} />
|
|
</Circle>
|
|
<Circle>
|
|
<CircleHelp className="size-4" onClick={handleDocHelpCLick} />
|
|
</Circle> */}
|
|
<Circle>
|
|
{theme === 'dark' ? (
|
|
<MoonIcon onClick={onMoonClick} size={20} />
|
|
) : (
|
|
<SunIcon onClick={onSunClick} size={20} />
|
|
)}
|
|
</Circle>
|
|
<User></User>
|
|
</Space>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default RightToolBar;
|