Proyectos de Subversion LeadersLinked - Antes de SPA

import { Add, Remove } from '@mui/icons-material'
import React, { useState } from 'react'
import IconButton from '@mui/material/IconButton'
import { styled } from 'styled-components'

const StyledFiltersSidebar = styled.aside`
  display: flex;
  flex-direction: column;
  width: 100%;
  gap: 1rem;
`

const FiltersSidebarHeader = styled.div`
  display: flex;
  align-items: center;
  gap: 0.5rem;

  @media (min-width: 768px) {
    button {
      display: none;
    }
  }
`

const FiltersSidebar = ({ children }) => {
  const [isShowFilters, setiIsShowFilters] = useState(true)

  const toggleFilterState = () => {
    setiIsShowFilters(!isShowFilters)
  }

  return (
    <StyledFiltersSidebar>
      <FiltersSidebarHeader>
        <h2>Filtros</h2>
        <IconButton onClick={toggleFilterState}>
          {isShowFilters ? <Remove /> : <Add />}
        </IconButton>
      </FiltersSidebarHeader>
      {isShowFilters && (() => children)()}
    </StyledFiltersSidebar>
  )
}

export default FiltersSidebar