forked from ddrilling/asb_cloud_front
Add UserView
This commit is contained in:
parent
dc5b96ccb0
commit
c8d184c590
37
src/components/UserView.jsx
Normal file
37
src/components/UserView.jsx
Normal file
@ -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>
|
||||||
|
|
||||||
|
}
|
25
src/styles/grid.css
Normal file
25
src/styles/grid.css
Normal file
@ -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; }
|
Loading…
Reference in New Issue
Block a user