asb_cloud_front/src/components/UserView.jsx

import {Tooltip} from 'antd'
import {UserOutlined} from '@ant-design/icons'
import {Grid, GridItem} from './Grid'

export const UserView = ({user}) => {
  if(!user)
    return <Tooltip title='нет пользователя'>-</Tooltip>

  const displayName = user?.login

  const tooltipInfo = <Grid columnGap='8px'>
    <GridItem row={1} col={1}>
      Имя:
    </GridItem>
    <GridItem row={1} col={2}>
      {user?.name}
    </GridItem>
    <GridItem row={2} col={1}>
      Фамилия:
    </GridItem>
    <GridItem row={3} col={2}>
      {user?.surname}
    </GridItem>
    <GridItem row={3} col={1}>
      Отчество:
    </GridItem>
    <GridItem row={3} col={2}>
      {user?.patronymic}
    </GridItem>
    <GridItem row={4} col={1}>
      Компания:
    </GridItem>
    <GridItem row={4} col={2}>
      {user?.company?.caption}
    </GridItem>
  </Grid>

  return <Tooltip title={tooltipInfo}>
    <UserOutlined style={{marginRight:8}}/>
    {displayName}
  </Tooltip>
  
}