const { setSelectedProjectId, selectedProjectId, boards, onChangeShowEditBoardDialog, createBoardStatus, componentOwnerId } = props; const BoardList = styled.div` justify-content: center; width: 100%; max-height: 85%; padding: 10px; overflow-y: scroll; scroll-behavior: smooth; scrollbar-color: black black; ::-webkit-scrollbar { width: 6px; } ::-webkit-scrollbar-thumb { background-color: black; border-radius: 6px; } ::-webkit-scrollbar-thumb:hover { background-color: black; } * { scrollbar-color: black black; } html::-webkit-scrollbar { width: 12px; } html::-webkit-scrollbar-thumb { background-color: black; border-radius: 6px; } html::-webkit-scrollbar-thumb:hover { background-color: black; } `; const [ hoverId, setHoverId ] = useState( -1 ); return ( <BoardList> { ( boards || [] ) .map( ( board ) => { const boardStatus = props.createBoardStatus.find( b => b.name === board[ 1 ] ); return ( <Widget key={ board[ 0 ] } src={ `${ componentOwnerId }/widget/Calimero.TaskChain.SideMenu.BoardItem` } props={ { id: board[ 0 ], name: board[ 1 ], onClick: () => setSelectedProjectId( board[ 0 ] ), onMouseEnter: () => setHoverId( board[ 0 ] ), onMouseLeave: () => setHoverId( -1 ), onSettingsClick: () => onChangeShowEditBoardDialog( true, board[ 0 ], board[ 1 ] ), hoverId, selectedProjectId, boardStatus, componentOwnerId } } /> ); } ) } </BoardList> );