Rev 7007 | AutorÃa | Comparar con el anterior | Ultima modificación | Ver Log |
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