import * as React from 'react' ; import { FaAngleRight , FaAngleDown } from 'react-icons/fa' ; export function Disclosure ( { children , label , defaultIsOpen = false } ) { const [ isOpen , setIsOpen ] = React . useState ( defaultIsOpen ) ; function onSelect ( ) { setIsOpen ( ! isOpen ) ; } return ( < div className = "disclosure" > < button onClick = { onSelect } className = { `disclosure-button ${ isOpen ? 'open' : 'collapsed' }` } > { isOpen ? < FaAngleDown / > : < FaAngleRight />} < span > { label } < /span> < /button> < div className = { `disclosure-panel ${ isOpen ? 'open' : 'collapsed' }` } hidden = { ! isOpen } > { children } < /div> < /div>); }