| | |
| | | const toggle = () => setOpen(!open) |
| | | |
| | | return ( |
| | | <div className={classNames('bg-background-section-burn rounded-xl overflow-hidden', wrapperClassName)}> |
| | | <div className='flex cursor-pointer items-center justify-between px-3 py-2 text-xs font-medium leading-[18px] text-text-secondary' onClick={toggle}> |
| | | <div className={classNames('bg-background-section-burn rounded-xl', wrapperClassName)}> |
| | | <div className='flex items-center justify-between leading-[18px] px-3 py-2 text-xs font-medium text-text-secondary cursor-pointer' onClick={toggle}> |
| | | {title} |
| | | { |
| | | open |
| | | ? <ChevronDownIcon className='h-3 w-3 text-components-button-tertiary-text' /> |
| | | : <ChevronRightIcon className='h-3 w-3 text-components-button-tertiary-text' /> |
| | | ? <ChevronDownIcon className='w-3 h-3 text-components-button-tertiary-text' /> |
| | | : <ChevronRightIcon className='w-3 h-3 text-components-button-tertiary-text' /> |
| | | } |
| | | </div> |
| | | { |
| | | open && ( |
| | | <div className='mx-1 mb-1 rounded-lg border-t border-divider-subtle bg-components-panel-on-panel-item-bg py-1'> |
| | | <div className='py-1 mb-1 mx-1 border-t border-divider-subtle rounded-lg bg-components-panel-on-panel-item-bg'> |
| | | { |
| | | items.map(item => ( |
| | | <div key={item.key} onClick={() => onSelect && onSelect(item)}> |