Proyectos de Subversion LeadersLinked - SPA

import React from 'react'

import { Link } from 'react-router-dom'

import { Avatar } from '@mui/material'

import { useSelector } from 'react-redux'

import Paraphrase from '../../UI/Paraphrase'

import StyledContainer from '../../widgets/WidgetLayout'

const UserInfo = ({

  cover = '',

  image = '',

  fullname = '',

  description = '',

  visits = 0,

  connections = 0

}) => {

  const labels = useSelector(({ intl }) => intl.labels)

  return (

    <StyledContainer>

      {cover && (

        <img

          src='./static/profile_2.jpg'

          alt='Profile cover'

          className='sidebar__cover'

        />

      )}

      <Avatar

        src={image}

        alt={`${fullname} profile image`}

        sx={{ width: '60px', height: '60px' }}

      />

      <Paraphrase as='h2'>{fullname}</Paraphrase>

      <Paraphrase>{description}</Paraphrase>

      <StatItem

        title={labels.who_has_seen_my_profile}

        number={visits}

        url='/profile/people-viewed-profile'

      />

      <StatItem

        title={labels.connections}

        number={connections}

        url='/connection/my-connections'

      />

    </StyledContainer>

  )

}

const StatItem = ({ title = '', number = 0, url = '' }) => {

  return (

    <Link

      to={url}

      className='sidebar__stat'

      target='secondary'

      onClick={(e) => !url && e.preventDefault()}

    >

      <span>{title}</span>

      <span className='sidebar__stat-number'>{number}</span>

    </Link>

  )

}

export default UserInfo