From c8d184c590fab8c1830b79b2c7c623b494699931 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=D0=A4=D1=80=D0=BE=D0=BB=D0=BE=D0=B2?=
 <nikita.grigorevich@gmail.com>
Date: Tue, 31 Aug 2021 12:30:03 +0500
Subject: [PATCH] Add UserView

---
 src/components/UserView.jsx | 37 +++++++++++++++++++++++++++++++++++++
 src/styles/grid.css         | 25 +++++++++++++++++++++++++
 2 files changed, 62 insertions(+)
 create mode 100644 src/components/UserView.jsx
 create mode 100644 src/styles/grid.css

diff --git a/src/components/UserView.jsx b/src/components/UserView.jsx
new file mode 100644
index 0000000..8d45740
--- /dev/null
+++ b/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>
+  
+}
\ No newline at end of file
diff --git a/src/styles/grid.css b/src/styles/grid.css
new file mode 100644
index 0000000..b1bfcac
--- /dev/null
+++ b/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; }
\ No newline at end of file