const BoardListItem = styled.div` 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> );