File size: 2,566 Bytes
b9fe2b4 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 |
import { useTranslate } from '@/hooks/common-hooks';
import { DownOutlined, GithubOutlined } 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 { CircleHelp, 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 handleGithubCLick = () => {
window.open('https://github.com/infiniflow/ragflow', 'target');
};
const handleDocHelpCLick = () => {
window.open('https://ragflow.io/docs/dev/category/guides', 'target');
};
const RightToolBar = () => {
const { t } = useTranslate('common');
const changeLanguage = useChangeLanguage();
const { setTheme, theme } = useTheme();
const {
data: { language = 'English' },
} = 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;
|