You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
50 lines
1.3 KiB
50 lines
1.3 KiB
import Icon from '@/components/icon'
|
|
import { useTranslation } from '@/i18n.ts'
|
|
import { currentUserAtom } from '@/store/user.ts'
|
|
import { Avatar as AntAvatar, Dropdown, Spin } from 'antd'
|
|
import { useAtomValue } from 'jotai'
|
|
|
|
const Avatar = () => {
|
|
|
|
const { t } = useTranslation()
|
|
const { data, isLoading } = useAtomValue(currentUserAtom)
|
|
|
|
return (
|
|
<div>
|
|
<Dropdown
|
|
key={'user'}
|
|
placement="bottomRight"
|
|
menu={{
|
|
items: [
|
|
{
|
|
key: 'logout',
|
|
icon: <Icon type={'park:Logout'}/>,
|
|
label: <span style={{
|
|
marginInlineStart: 8,
|
|
userSelect: 'none'
|
|
}}>{t('app.header.logout')}</span>,
|
|
},
|
|
],
|
|
}}
|
|
>
|
|
<Spin spinning={isLoading}>
|
|
<AntAvatar
|
|
key="avatar"
|
|
size={'small'}
|
|
src={data?.avatar || data?.nickname?.substring(0, 1)}>
|
|
{!data?.avatar && data?.nickname?.substring(0, 1)}
|
|
</AntAvatar>
|
|
<span key="name"
|
|
style={{
|
|
marginInlineStart: 8,
|
|
userSelect: 'none'
|
|
}}>
|
|
{data?.nickname}
|
|
</span>
|
|
</Spin>
|
|
</Dropdown>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default Avatar
|