Proyectos de Subversion LeadersLinked - SPA

Rev

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