Proyectos de Subversion LeadersLinked - Antes de SPA

/* eslint-disable react/prop-types */
import React, { useState } from 'react'
import ExpandMoreIcon from '@mui/icons-material/ExpandMore'
import ExpandLessIcon from '@mui/icons-material/ExpandLess'
import parse from 'html-react-parser'
import Avatar from '../../../../shared/Avatar/Avatar'
import StatItem from './StatItem'
import HelpersContainer from './HelpersContainer'
import './Sidebar.scss'
import SocialNetworks from '../../../components/home-section/SocialNetworks'

const Sidebar = ({
  image,
  fullName,
  description,
  visits,
  connections,
  cover = null
}) => {
  const [display, setDisplay] = useState(false)

  return (
    <div className='sidebar'>

      <div className={`sidebar__top ${!cover && 'pt-3'}`}>
        {cover && <img src='./static/profile_2.jpg' alt='Profile cover' className='sidebar__cover' />}
        <Avatar imageUrl={image} size='xl' name={fullName} />
        <h2>{parse(fullName)}</h2>
        {parse(description)}
      </div>

      <div className={`sidebar__options ${display && 'show'}`}>
        <div className='sidebar__stats'>
          <StatItem title='¿Quien ha visto tu perfil?' number={visits} url='/profile/people-viewed-profile' />
          <StatItem title='Conexiones' number={connections} url='/connection/my-connections' />
        </div>
        <HelpersContainer />
        <SocialNetworks className='sidebar-apps__widget' />
      </div>

      <footer className='sideabar__footer'>
        <button
          onClick={() => setDisplay(!display)}
          type='button'
        >
          <span>
            {display ? 'Show less' : 'Show more'}
          </span>
          {display ? <ExpandLessIcon /> : <ExpandMoreIcon />}
        </button>
      </footer>

    </div>
  )
}

export default Sidebar