Proyectos de Subversion LeadersLinked - Antes de SPA

import React, { useState } from 'react'

import { Avatar } from '@mui/material'

import ExpandMoreIcon from '@mui/icons-material/ExpandMore'

import ExpandLessIcon from '@mui/icons-material/ExpandLess'

import StatItem from './StatItem'

import './Sidebar.css'

import RecentItem from './RecentItem'

const Sidebar = () => {

  const [display, setDisplay] = useState(false)

  return (

    <div className='sidebar'>

      <div className='sidebar__top'>

        <img src='./static/profile_2.jpg' alt='Profile cover' />

        <Avatar />

        <h2>Stivens Carrasquel</h2>

        <h4>loremipsun@gmail.com</h4>

      </div>

      <div className={`sidebar__options ${display && 'show'}`}>

        <div className='sidebar__stats'>

          <StatItem title='Who viewed you' number={20} />

          <StatItem title='Who viewed you' number={20} />

        </div>

        <RecentItem />

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