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