Add components for simple view users and companies.

Add Grid.jsx for css grid.

src/components/CompanyView.jsx

@@ -0,0 +1,25 @@
+import {Tooltip} from 'antd'
+import {BankOutlined} from '@ant-design/icons'
+import {Grid, GridItem} from './Grid'
+
+export const CompanyView = ({company}) => {
+  if(!company)
+    return <Tooltip title='нет данных'>-</Tooltip>
+
+  const displayName = company?.caption
+
+  const tooltipInfo = <Grid columnGap='8px'>
+    <GridItem row={1} col={1}>
+      тип:
+    </GridItem>
+    <GridItem row={1} col={2}>
+      {company?.companyTypeCaption}
+    </GridItem>
+  </Grid>
+
+  return <Tooltip title={tooltipInfo}>
+    <BankOutlined style={{marginRight:8}}/>
+    {displayName}
+  </Tooltip>
+  
+}

src/components/Grid.jsx

@@ -0,0 +1,30 @@
+export const Grid = ({children, ...other}) => {
+  const gridContainerStyle = {
+    display: 'grid',
+    columnGap: '4px',
+    rowGap: '4px',
+    ...other,
+  }
+
+  return <div style={gridContainerStyle}>
+    {children}
+  </div>
+}
+
+export const GridItem = ({children, row, col, rowSpan, colSpan, ...other}) => {
+  const localRow = +row
+  const localCol = +col
+  const localColSpan = colSpan ? colSpan - 1 : 0
+  const localRowSpan = rowSpan ? rowSpan - 1 : 0
+  const gridItemStyle = {
+    gridColumnStart: localCol,
+    gridColumnEnd: localCol + localColSpan,
+    gridRowStart: localRow,
+    gridRowEnd: localRow + localRowSpan,
+    ...other,
+  }
+
+  return <div style={gridItemStyle}>
+    {children}
+  </div>
+}

src/components/UserView.jsx

@@ -1,6 +1,6 @@
 import {Tooltip} from 'antd'
-import { UserOutlined } from '@ant-design/icons'
-import '../styles/grid.css'
+import {UserOutlined} from '@ant-design/icons'
+import {Grid, GridItem} from './Grid'
 
 export const UserView = ({user}) => {
   if(!user)
@@ -8,29 +8,35 @@ export const UserView = ({user}) => {
 
   const displayName = user?.login
 
-  const tooltipInfo = <div className='grid_container'>
-    <div className='c1 r1'>
-      Имя
-    </div>
-    <div className='c2 r1'>
+  const tooltipInfo = <Grid columnGap='8px'>
+    <GridItem row={1} col={1}>
+      Имя:
+    </GridItem>
+    <GridItem row={1} col={2}>
       {user?.name}
-    </div>
-    <div className='c1 r2'>
-      Фамилия
-    </div>
-    <div className='c2 r2'>
+    </GridItem>
+    <GridItem row={2} col={1}>
+      Фамилия:
+    </GridItem>
+    <GridItem row={3} col={2}>
       {user?.surname}
-    </div>
-    <div className='c1 r3'>
-      Отчество
-    </div>
-    <div className='c2 r3'>
+    </GridItem>
+    <GridItem row={3} col={1}>
+      Отчество:
+    </GridItem>
+    <GridItem row={3} col={2}>
       {user?.patronymic}
-    </div>
-  </div>
+    </GridItem>
+    <GridItem row={4} col={1}>
+      Компания:
+    </GridItem>
+    <GridItem row={4} col={2}>
+      {user?.company?.caption}
+    </GridItem>
+  </Grid>
 
   return <Tooltip title={tooltipInfo}>
-    <UserOutlined/>
+    <UserOutlined style={{marginRight:8}}/>
     {displayName}
   </Tooltip>