const { onClick, selected, boards, } = props; 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 BoardList = styled.div` display: flex; flex-direction: column; justify-content: center; width: 100%; padding-left: 0; `; const GearIcon = styled.a` color: #FFFFFF; :hover { color: #0E0E10; } `; State.init({ hoverId: -1, }); const updateHoverId = (id) => { State.update({ hoverId: id, }); }; return ( <BoardList> {(boards || []).map(([id, name]) => ( <BoardListItem id={id} selected={selected === id} onClick={onClick} onMouseEnter={() => updateHoverId(id)} onMouseLeave={() => updateHoverId(-1)} > <BoardListItemName> <BoardListItemCircle /> <text> {name} </text> </BoardListItemName> {state.hoverId === id && <GearIcon href="/"> <i class="bi bi-gear"></i> </GearIcon> } </BoardListItem> ))} </BoardList> );