const BoardListItem = styled.div` cursor: pointer; display: flex; flex-direction: row; height: 40px; width: 100%; justify-content: space-between; padding-left: 16px; padding-right: 16px; align-items: center; font-weight: 400; line-height: 24px; letter-spacing: 0em; :hover { text-decoration: none; background-color: #777583; color: #FFFFFF; } border-radius: 4px; gap: 4px; ${ ( { selected } ) => selected ? "background-color: #25252A;" : "" }; ${ ( { selected } ) => selected ? "color: #FFFFFF;" : "color: #777583;" }; ${ ( { disabled } ) => disabled ? "cursor: not-allowed;" : "cursor: pointer;" }; `; const BoardListItemCircle = styled.div` width: 16px; height: 16px; border-radius: 50%; background-color: #D0FC42; `; const BoardListItemName = styled.div` display: flex; flex-direction: row; gap: 8px; align-items: center; `; const GearIcon = styled.a` color: #FFFFFF; :hover { color: #0E0E10; } `; const Text = styled.p` padding: 0; margin: 0; max-width: 100px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; `; const SuccessIcon = styled.div` color: #00FF66; `; const ErrorIcon = styled.div` color: #DC3545; `; return ( <BoardListItem key={props.id + props.name} id={props.id} selected={props.selectedProjectId === props.id} onClick={() => { if (props.id) { props.onClick(); } }} onMouseEnter={props.onMouseEnter} onMouseLeave={props.onMouseLeave} disabled={!props.id} > <BoardListItemName> <BoardListItemCircle /> <Text> {props.name} </Text> </BoardListItemName> {props.boardStatus.status ? ( props.boardStatus.status === "Saving..." ? ( <Widget src={`${props.componentOwnerId}/widget/Calimero.TaskChain.Loader.Loader`} props={{ size: 16 }} /> ) : props.boardStatus.status === "Saved" ? ( <SuccessIcon> <i className="bi bi-check"></i> </SuccessIcon> ) : props.boardStatus.status === "Error" ? ( <ErrorIcon> <i className="bi bi-x-circle"></i> </ErrorIcon> ) : null ) : (props.hoverId === props.id && (<GearIcon onClick={props.onSettingsClick}> <i className="bi bi-gear"></i> </GearIcon>) ) } </BoardListItem> )