56 lines
1.6 KiB
TypeScript
56 lines
1.6 KiB
TypeScript
import { classNames } from '@/Utils/ConcatenateClassNames'
|
|
import { useRef } from 'react'
|
|
import AccountMenu, { AccountMenuProps } from '../AccountMenu/AccountMenu'
|
|
import Icon from '../Icon/Icon'
|
|
import Popover from '../Popover/Popover'
|
|
import StyledTooltip from '../StyledTooltip/StyledTooltip'
|
|
|
|
type Props = AccountMenuProps & {
|
|
isOpen: boolean
|
|
hasError: boolean
|
|
toggleMenu: () => void
|
|
user: unknown
|
|
}
|
|
|
|
const AccountMenuButton = ({
|
|
application,
|
|
hasError,
|
|
isOpen,
|
|
mainApplicationGroup,
|
|
onClickOutside,
|
|
toggleMenu,
|
|
user,
|
|
viewControllerManager,
|
|
}: Props) => {
|
|
const buttonRef = useRef<HTMLButtonElement>(null)
|
|
|
|
return (
|
|
<>
|
|
<StyledTooltip label="Open account menu">
|
|
<button
|
|
ref={buttonRef}
|
|
onClick={toggleMenu}
|
|
className={classNames(
|
|
isOpen ? 'bg-border' : '',
|
|
'flex h-full w-8 cursor-pointer items-center justify-center rounded-full',
|
|
)}
|
|
>
|
|
<div className={hasError ? 'text-danger' : user ? 'text-info' : 'text-neutral'}>
|
|
<Icon type="account-circle" className="h-5 w-5 hover:text-info" />
|
|
</div>
|
|
</button>
|
|
</StyledTooltip>
|
|
<Popover anchorElement={buttonRef.current} open={isOpen} togglePopover={toggleMenu} side="top" className="py-2">
|
|
<AccountMenu
|
|
onClickOutside={onClickOutside}
|
|
viewControllerManager={viewControllerManager}
|
|
application={application}
|
|
mainApplicationGroup={mainApplicationGroup}
|
|
/>
|
|
</Popover>
|
|
</>
|
|
)
|
|
}
|
|
|
|
export default AccountMenuButton
|