const { setSelectedProjectId, selectedProjectId, boards, onChangeShowEditBoardDialog, 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), hoverId, selectedProjectId, boardStatus, componentOwnerId, }} /> ); })} </BoardList> );