87 lines
3.1 KiB
TypeScript
87 lines
3.1 KiB
TypeScript
import type { CommonProps } from '@/@types/common'
|
|
import Dropdown from '@/components/ui/Dropdown'
|
|
import { ROUTES_ENUM } from '@/routes/route.constant'
|
|
import { useStoreState } from '@/store'
|
|
import withHeaderItem from '@/utils/hoc/withHeaderItem'
|
|
import useAuth from '@/utils/hooks/useAuth'
|
|
import { useLocalization } from '@/utils/hooks/useLocalization'
|
|
import classNames from 'classnames'
|
|
import { FiActivity } from 'react-icons/fi'
|
|
import { HiOutlineLogout, HiOutlineUser } from 'react-icons/hi'
|
|
import { Link } from 'react-router-dom'
|
|
import { Avatar } from '../ui'
|
|
|
|
type DropdownList = {
|
|
label: string
|
|
path: string
|
|
icon: JSX.Element
|
|
}
|
|
|
|
const _UserDropdown = ({ className }: CommonProps) => {
|
|
const { userName, name, email, avatar } = useStoreState((state) => state.auth.user)
|
|
const tenant = useStoreState((state) => state.abpConfig.config?.currentTenant)
|
|
const { translate } = useLocalization()
|
|
const { signOut } = useAuth()
|
|
|
|
const dropdownItemList: DropdownList[] = [
|
|
{
|
|
label: translate('::Abp.Identity.Profile'),
|
|
path: ROUTES_ENUM.protected.admin.profile.general,
|
|
icon: <HiOutlineUser />,
|
|
},
|
|
{
|
|
label: translate('::Abp.Identity.ActivityLogs'),
|
|
path: ROUTES_ENUM.protected.admin.activityLog,
|
|
icon: <FiActivity />,
|
|
},
|
|
]
|
|
|
|
const UserAvatar = (
|
|
<div className={classNames(className, 'flex items-center gap-2')}>
|
|
<Avatar size={32} shape="circle" src={avatar} alt="avatar" />
|
|
<div className="hidden md:block">
|
|
<div className="text-xs">{userName}</div>
|
|
<div className="font-bold">{name}</div>
|
|
<div className="font-bold italic">{tenant?.name}</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
|
|
return (
|
|
<div>
|
|
<Dropdown menuStyle={{ minWidth: 240 }} renderTitle={UserAvatar} placement="bottom-end">
|
|
<Dropdown.Item variant="header">
|
|
<div className="py-2 px-3 flex items-center gap-2">
|
|
<Avatar shape="circle" src={avatar} alt="avatar" />
|
|
<div>
|
|
<div className="font-bold text-gray-900 dark:text-gray-100">{name}</div>
|
|
<div className="text-xs">{email}</div>
|
|
</div>
|
|
</div>
|
|
</Dropdown.Item>
|
|
<Dropdown.Item variant="divider" />
|
|
{dropdownItemList.map((item) => (
|
|
<Dropdown.Item key={item.label} eventKey={item.label} className="mb-1 px-0">
|
|
<Link className="flex h-full w-full px-2" to={item.path}>
|
|
<span className="flex gap-2 items-center w-full">
|
|
<span className="text-xl opacity-50">{item.icon}</span>
|
|
<span>{item.label}</span>
|
|
</span>
|
|
</Link>
|
|
</Dropdown.Item>
|
|
))}
|
|
{/* <Dropdown.Item variant="divider" /> */}
|
|
<Dropdown.Item eventKey="Sign Out" className="gap-2" onClick={signOut}>
|
|
<span className="text-xl opacity-50">
|
|
<HiOutlineLogout />
|
|
</span>
|
|
<span>{translate('::Abp.Identity.SignOut')} </span>
|
|
</Dropdown.Item>
|
|
</Dropdown>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
const UserDropdown = withHeaderItem(_UserDropdown)
|
|
|
|
export default UserDropdown
|