const contract = props.contract || 'docschain.ws-protocol-63'; const componentOwnerId = props.componentOwnerId ?? 'calimero.testnet'; const redirectConfig = !componentOwnerId || componentOwnerId === 'calimero.near' ? {} : { redirect: (url) => url.replace('calimero.near', componentOwnerId) }; const transformUrl = (url) => !componentOwnerId || componentOwnerId === 'calimero.near' ? 'calimero.near' : url.replace('calimero.near', componentOwnerId); const Container = styled.div` background-color: #0e0e10; width: 317px; `; const Item = styled.div` display: flex; justify-content: space-between; align-items: center; padding-top: 0.5rem; padding-bottom: 0.5rem; padding-left: 1rem; padding-right: 1rem; border-radius: 0.5rem; &:hover { color: #ffffff; } a { text-decoration: none; color: inherit; &:hover { color: #ffffff; } } :hover { background-color: #25252a; } cursor: pointer; ${({ selected }) => selected ? 'color: #fff; background-color: #25252a;' : 'color: #777583; background-color: #0E0E10;'} `; const TextMedium = styled.div` font-size: 16px; font-style: normal; font-weight: 400; padding-top: 1px; `; const NameContainer = styled.a` display: flex; justify-content: start; align-items: center; gap: 12px; width: 100%; height: 24px; `; const settingsList = [ { id: 'members', title: 'Members', href: 'Members.Main', icon: 'bi bi-people', }, ]; return ( <Container> {settingsList.map((item) => ( <Item key={item.id} selected={props.selectedId === item.id}> <NameContainer href={transformUrl( `#/calimero.near/widget/Calimero.DocsChain.${item.href}`, )} > <i className={`${item.icon} w-5 h-5`} style={{ fontSize: '1.5rem' }} ></i> <TextMedium>{item.title}</TextMedium> </NameContainer> </Item> ))} </Container> );