adminjs-design-system/src/molecules/logged-user.tsx

import React from 'react'
import styled from 'styled-components'
import { Box } from '../atoms/box/box'
import { DropDown, DropDownTrigger, DropDownMenu } from './drop-down/index'
import { Text } from '../atoms/text'
import { Icon } from '../atoms/icon'

const height = '46px'

const LoggedUserInfo = styled(Box)`
  display: flex;
  flex-direction: row;
  vertical-align: middle;
  color: ${({ theme }): string => theme.colors.grey60};
  height: ${height};

  & img {
    border-radius: 9999px;
    margin-right: 0 8px;
    width: 36px;
    height: 36px;
    object-fit: cover;
    border-radius: 9999px;
  }
`

/**
 * @memberof LoggedUser
 * @alias LoggedUserProps
 * @private
 */
export type LoggedUserProps = {
  email: string;
  title?: string;
  avatarUrl?: string;
}

/**
 * @classdesc
 *
 * <img src="components/logged-user.png" />
 *
 * Logged in user state in the header
 *
 *
 * ### Usage
 *
 * ```javascript
 * import { LoggedUser, LoggedUserProps } from '@adminjs/design-system'
 * ```
 *
 * @component
 * @subcategory Molecules
 * @hideconstructor
 * @see {@link https://storybook.adminjs.co/?path=/story/designsystem-molecules-loggeduser--default Storybook}
 * @see LoggedUserProps
 * @section design-system
 * @deprecated In favour of {@link CurrentUserNav} component
 */
const LoggedUser: React.FC<LoggedUserProps> = (props) => {
  const { email, title, avatarUrl, children } = props

  return (
    <DropDown>
      <DropDownTrigger>
        <LoggedUserInfo pr="xl">
          <Box mr="default">
            <Text
              fontSize="default"
              lineHeight={title ? 'lg' : 'xl'}
              fontWeight="normal"
            >
              {email}
            </Text>
            <Text fontSize="sm" color="grey40" lineHeight="sm">{title}</Text>
          </Box>
          {avatarUrl ? (
            <img src={avatarUrl} alt="avatar" />
          ) : null}
          <Icon icon="OverflowMenuVertical" size={16} my="default" color="grey60" />
        </LoggedUserInfo>
      </DropDownTrigger>
      <DropDownMenu top={height}>
        {children}
      </DropDownMenu>
    </DropDown>
  )
}

export { LoggedUser }
export default LoggedUser