Proyectos de Subversion LeadersLinked - SPA

import React from 'react'
import styled from 'styled-components'

import WidgetLayout from 'components/widgets/WidgetLayout'

const SideMenuContainer = styled(WidgetLayout)`
  padding: 1rem;
  ul {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    li,
    label {
      cursor: pointer;
    }
    .selected label {
      font-weight: 600;
    }
  }
`

const SideMenu = ({ items = [], onChange = () => {}, currentItem }) => {
  return (
    <SideMenuContainer>
      <ul>
        {items.map(({ value, name }) => (
          <li className={currentItem === value && 'selected'} key={value}>
            <input
              type='radio'
              id={`category-${name}`}
              name='category'
              value={value}
              onChange={(e) => onChange(e.target.value)}
              hidden
            />
            <label htmlFor={`category-${name}`}>{name}</label>
          </li>
        ))}
      </ul>
    </SideMenuContainer>
  )
}

export default SideMenu