Add UserView

src/components/UserView.jsx

@@ -0,0 +1,37 @@
+import {Tooltip} from 'antd'
+import { UserOutlined } from '@ant-design/icons'
+import '../styles/grid.css'
+
+export const UserView = ({user}) => {
+  if(!user)
+    return <Tooltip title='нет пользователя'>-</Tooltip>
+
+  const displayName = user?.login
+
+  const tooltipInfo = <div className='grid_container'>
+    <div className='c1 r1'>
+      Имя
+    </div>
+    <div className='c2 r1'>
+      {user?.name}
+    </div>
+    <div className='c1 r2'>
+      Фамилия
+    </div>
+    <div className='c2 r2'>
+      {user?.surname}
+    </div>
+    <div className='c1 r3'>
+      Отчество
+    </div>
+    <div className='c2 r3'>
+      {user?.patronymic}
+    </div>
+  </div>
+
+  return <Tooltip title={tooltipInfo}>
+    <UserOutlined/>
+    {displayName}
+  </Tooltip>
+  
+}

src/styles/grid.css

@@ -0,0 +1,25 @@
+.grid_container{
+  display: grid;
+  column-gap: 4px;
+  row-gap: 4px;
+  justify-items: stretch;
+  align-items: stretch;
+}
+
+.c1{  grid-column: 1 / span 1; }
+.c2{  grid-column: 2 / span 1; }
+.c3{  grid-column: 3 / span 1; }
+.c4{  grid-column: 4 / span 1; }
+.c5{  grid-column: 5 / span 1; }
+.c6{  grid-column: 6 / span 1; }
+.c7{  grid-column: 7 / span 1; }
+.c8{  grid-column: 8 / span 1; }
+
+.r1{  grid-row: 1 / span 1; }
+.r2{  grid-row: 2 / span 1; }
+.r3{  grid-row: 3 / span 1; }
+.r4{  grid-row: 4 / span 1; }
+.r5{  grid-row: 5 / span 1; }
+.r6{  grid-row: 6 / span 1; }
+.r7{  grid-row: 7 / span 1; }
+.r8{  grid-row: 8 / span 1; }