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'

const Sidebar = ({

  image,

  fullName,

  description,

  visits,

  connections,

}) => {

  const [display, setDisplay] = useState(false)

  return (

    <div className='sidebar'>

      <div className='sidebar__top'>

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

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