const componentOwnerId = props.componentOwnerId; const onSelect = props.onSelect; const accountData = props.accountData; const AutocompleteWrapper = styled.div` flex-grow: 1; width: 100%; height: auto; max-height: 156px; position: absolute; z-index: 60; bottom: 100%; margin-bottom: 4px; background-color: #1d1d21; border-radius: 8px; display: flex; flex-direction: column; gap: 4px; left: 0px; padding-top: 8px; padding-bottom: 8px; padding-left: 16px; padding-right: 16px; color: #fff; overflow-y: scroll; .listItem { display: flex; justify-content: space-between; align-items: center; padding: 4px; cursor: pointer; border-radius: 8px; :hover { background-color: #25252a; } } .accountIdText { color: #686672; font-family: Helvetica Neue; font-size: 14px; font-style: normal; font-weight: 400; line-height: 150%; } .accountInfo { display: flex; align-items: center; gap: 8px; color: #fff; font-family: Helvetica Neue; font-size: 14px; font-style: normal; font-weight: 400; line-height: 150%; } .profileIcon { height: 24px; width: 24px; border-radius: 100%; background-color: red; } `; const onResultClick = (id) => { onSelect && onSelect(id); }; return ( <AutocompleteWrapper> {accountData.map((account, id) => ( <div className="listItem" onClick={() => onResultClick(account.id)} key={id} > <div className="accountInfo"> <Widget src={`${componentOwnerId}/widget/Calimero.Curb.ProfileIcon.UserProfileIcon`} props={{ accountId: account.id, active: account.active, componentOwnerId: props.componentOwnerId, }} /> <span> {account.name.length > 64 ? `${account.name.slice(0, 64)}...` : account.name} </span> <span>{account.id}</span> </div> {/* <div className="accountIdText">{account.id}</div> */} </div> ))} </AutocompleteWrapper> );