Proyectos de Subversion LeadersLinked - SPA

import React from 'react'

import { Avatar } from '@mui/material'

import { useSelector } from 'react-redux'

import parse from 'html-react-parser'

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

const UserInfo = ({

  cover = '',

  image = '',

  fullname = '',

  description = '',

  visits = 0,

  connections = 0,

}) => {

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

  return (

    <div className="sidebar__top">

      {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' }}

      />

      <h2>{parse(fullname)}</h2>

      {parse(description)}

      <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"

      />

    </div>

  )

}

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