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;" }; `; 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.text` padding-top: 4px; `; return ( <BoardListItem key={props.id + props.name} id={props.id} selected={props.selected === props.id} onClick={props.onClick} onMouseEnter={props.onMouseEnter} onMouseLeave={props.onMouseLeave} > <BoardListItemName> <BoardListItemCircle /> <Text> {props.name} </Text> {boardStatus && <Text>{boardStatus.status}</Text> } </BoardListItemName> {props.hoverId === props.id && <GearIcon onClick={props.onSettingsClick}> <i class="bi bi-gear"></i> </GearIcon> } </BoardListItem> )