Улучшен вид UserView

src/components/views/UserView.tsx

@@ -1,4 +1,4 @@
-import { memo } from 'react'
+import { HTMLProps, memo } from 'react'
 import { Tooltip } from 'antd'
 import { UserOutlined } from '@ant-design/icons'
 
@@ -6,33 +6,58 @@ import { UserDto } from '@api'
 import { Grid, GridItem } from '@components/Grid'
 import { CompanyView } from './CompanyView'
 
-export type UserViewProps = {
+export type UserViewProps = HTMLProps<HTMLSpanElement> & {
     user?: UserDto
 }
 
-export const UserView = memo<UserViewProps>(({ user }) => user ? (
+export const UserView = memo<UserViewProps>(({ user, ...other }) =>
-  <Tooltip title={(
+    user ? (
+        <Tooltip
+            title={
                 <Grid style={{ columnGap: '8px' }}>
-      <GridItem row={1} col={1}>Фамилия:</GridItem>
+                    <GridItem row={1} col={1}>
-      <GridItem row={1} col={2}>{user?.surname}</GridItem>
+                        Фамилия:
+                    </GridItem>
+                    <GridItem row={1} col={2}>
+                        {user?.surname}
+                    </GridItem>
 
-      <GridItem row={2} col={1}>Имя:</GridItem>
+                    <GridItem row={2} col={1}>
-      <GridItem row={2} col={2}>{user?.name}</GridItem>
+                        Имя:
+                    </GridItem>
+                    <GridItem row={2} col={2}>
+                        {user?.name}
+                    </GridItem>
 
-      <GridItem row={3} col={1}>Отчество:</GridItem>
+                    <GridItem row={3} col={1}>
-      <GridItem row={3} col={2}>{user?.patronymic}</GridItem>
+                        Отчество:
+                    </GridItem>
+                    <GridItem row={3} col={2}>
+                        {user?.patronymic}
+                    </GridItem>
 
-      <GridItem row={4} col={1}>Компания:</GridItem>
+                    <GridItem row={4} col={1}>
+                        Компания:
+                    </GridItem>
                     <GridItem row={4} col={2}>
-        <CompanyView company={user?.company}/>
+                        <CompanyView company={user?.company} />
                     </GridItem>
                 </Grid>
-  )}>
+            }
-    <UserOutlined style={{ marginRight: 8 }}/>
+        >
+            <span {...other}>
+                <UserOutlined style={{ marginRight: 8 }} />
                 {user?.login}
+            </span>
         </Tooltip>
-) : (
+    ) : (
-  <Tooltip title='нет пользователя'>-</Tooltip>
+        <Tooltip title={'нет пользователя'}>
-))
+            <span {...other}>
+                <UserOutlined style={{ marginRight: 8 }} />
+                ---
+            </span>
+        </Tooltip>
+    )
+)
 
 export default UserView