Proyectos de Subversion LeadersLinked - SPA

Rev

| Ultima modificación | Ver Log |

Rev Autor Línea Nro. Línea
5 stevensc 1 
import React from 'react'
2 
import { Avatar } from '@mui/material'
3 
import { useSelector } from 'react-redux'
857 stevensc 4 
import styled, { css } from 'styled-components'
5 stevensc 5 
 
856 stevensc 6 
import Paraphrase from '../../UI/Paraphrase'
7 
import StyledContainer from '../../widgets/WidgetLayout'
8 
 
857 stevensc 9 
const StyledInfoContainer = styled(StyledContainer)`
10 
  display: flex;
11 
  flex-direction: column;
858 stevensc 12 
  align-items: center;
857 stevensc 13 
  ${(props) =>
14 
    !props.cover &&
15 
    css`
16 
      padding-top: 10px;
17 
    `}
18 
`
19 
 
20 
const StyledInfoItem = styled.div`
21 
  padding: 10px;
22 
  display: flex;
23 
  justify-content: space-between;
24 
  width: 100%;
25 
  .number {
26 
    font-weight: bold !important;
27 
    color: #0a66c2 !important;
28 
  }
29 
  ${(props) =>
30 
    props.url &&
31 
    css`
32 
      cursor: pointer;
33 
      &:hover {
34 
        background-color: rgba(0, 0, 0, 0.08);
35 
      }
36 
    `}
37 
`
38 
 
5 stevensc 39 
const UserInfo = ({
40 
  cover = '',
41 
  image = '',
42 
  fullname = '',
43 
  description = '',
44 
  visits = 0,
856 stevensc 45 
  connections = 0
5 stevensc 46 
}) => {
47 
  const labels = useSelector(({ intl }) => intl.labels)
856 stevensc 48 
 
5 stevensc 49 
  return (
857 stevensc 50 
    <StyledInfoContainer cover={cover}>
51 
      {cover && <img src={cover} alt='Profile cover' />}
5 stevensc 52 
      <Avatar
53 
        src={image}
54 
        alt={`${fullname} profile image`}
55 
        sx={{ width: '60px', height: '60px' }}
56 
      />
856 stevensc 57 
      <Paraphrase as='h2'>{fullname}</Paraphrase>
58 
      <Paraphrase>{description}</Paraphrase>
5 stevensc 59 
      <StatItem
60 
        title={labels.who_has_seen_my_profile}
61 
        number={visits}
856 stevensc 62 
        url='/profile/people-viewed-profile'
5 stevensc 63 
      />
64 
      <StatItem
65 
        title={labels.connections}
66 
        number={connections}
856 stevensc 67 
        url='/connection/my-connections'
5 stevensc 68 
      />
857 stevensc 69 
    </StyledInfoContainer>
5 stevensc 70 
  )
71 
}
72 
 
73 
const StatItem = ({ title = '', number = 0, url = '' }) => {
857 stevensc 74 
  const handleClick = () => {
75 
    if (!url) return
76 
    window.open(url, '_blank')
77 
  }
5 stevensc 78 
  return (
857 stevensc 79 
    <StyledInfoItem url={url} onClick={handleClick}>
5 stevensc 80 
      <span>{title}</span>
857 stevensc 81 
      <span className='number'>{number}</span>
82 
    </StyledInfoItem>
5 stevensc 83 
  )
84 
}
85 
 
86 
export default UserInfo