asb_cloud_front/src/components/UserView.tsx

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

interface UserViewProps {
  user: UserDto
}

export const UserView = ({ user } : UserViewProps) => (user ? (
    <Tooltip title={(
      <Grid style={{ columnGap: '8px' }}>
        <GridItem row={1} col={1}>Фамилия:</GridItem>
        <GridItem row={1} col={2}>{user?.surname}</GridItem>
        <GridItem row={2} col={1}>Имя:</GridItem>
        <GridItem row={2} col={2}>{user?.name}</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>
    )}>
      <UserOutlined style={{ marginRight: 8 }}/>
      {user?.login}
    </Tooltip>
  ) : (
    <Tooltip title='нет пользователя'>-</Tooltip>
  )
)