Proyectos de Subversion LeadersLinked - SPA

Rev

Rev 2826 | Ir a la última revisión | | Ultima modificación | Ver Log |

Rev Autor Línea Nro. Línea
2678 stevensc 1 
import React from 'react'
2 
import { useNavigate } from 'react-router-dom'
3 
import { Avatar, Box, Button, styled, Typography } from '@mui/material'
4 
import { useSelector } from 'react-redux'
5 
import parse from 'html-react-parser'
6 
 
7 
import { colors } from '@app/styles/mui/colors'
8 
import Widget from '@components/UI/Widget'
9 
 
10 
const WidgetButton = styled(Button)(() => ({
11 
  alignItems: 'center',
12 
  borderRadius: 0,
13 
  color: colors.font.subtitle,
14 
  display: 'flex',
15 
  fontWeight: 600,
16 
  justifyContent: 'space-between',
17 
  width: '100%',
18 
  '& span': {
19 
    color: '#0a66c2'
20 
  }
21 
}))
22 
 
23 
const UserProfileAvatar = styled(Avatar)(() => ({
24 
  width: '60px',
25 
  height: '60px',
26 
  margin: 'auto'
27 
}))
28 
 
29 
const UserProfileCard = ({
30 
  user: {
31 
    cover = '',
32 
    image = '',
33 
    fullname = '',
34 
    description = '',
35 
    visits = 0,
36 
    connections = 0
37 
  }
38 
}) => {
39 
  const labels = useSelector(({ intl }) => intl.labels)
40 
  const navigate = useNavigate()
41 
 
42 
  const handleNavigate = (path) => navigate(path)
43 
 
44 
  return (
45 
    <Widget>
46 
      <Widget.Media
47 
        src={cover}
48 
        alt={`${fullname} profile cover`}
49 
        height={60}
50 
        styles={{
51 
          display: cover ? 'block' : 'none',
52 
          marginBottom: cover ? '-20px' : '0px'
53 
        }}
54 
      />
55 
 
56 
      <Widget.Body sx={{ textAlign: 'center' }}>
57 
        <UserProfileAvatar src={image} alt={`${fullname} profile image`} />
58 
        <Typography variant='h2'>{parse(fullname ?? '')}</Typography>
59 
        <Typography>{parse(description ?? '')}</Typography>
60 
      </Widget.Body>
61 
 
62 
      <Box sx={{ display: 'flex', flexDirection: 'column' }}>
63 
        <WidgetButton
64 
          onClick={() => handleNavigate('/profile/people-viewed-profile')}
65 
        >
66 
          {labels.who_has_seen_my_profile}
67 
          <Typography variant='body2'>{visits ?? 0}</Typography>
68 
        </WidgetButton>
69 
 
70 
        <WidgetButton
71 
          onClick={() => handleNavigate('/connection/my-connections')}
72 
        >
73 
          {labels.connections}
74 
          <Typography variant='body2'>{connections ?? 0}</Typography>
75 
        </WidgetButton>
76 
      </Box>
77 
    </Widget>
78 
  )
79 
}
80 
 
81 
export default UserProfileCard