const communities = props.communities; const filteredCommunities = props.filteredCommunities; const isSearched = props.isSearched; const componentOwnerId = props.componentOwnerId; const Container = styled.div` width: 100%; display: flex; flex-direction: column; gap: 16px; `; const CommunitiesContainer = styled.div` width: 100%; display: grid; grid-template-columns: auto auto auto auto auto; gap: 16px; ${({ isSearched }) => isSearched && 'padding: 0px 24px 0px 24px;'} `; const SearchBox = styled.input` width: 347px; padding: 6px 12px 6px 12px; border-radius: 4px 0px 0px 4px; background-color: #37373f; color: #6c757d; border: none; :focus { border-color: #d0fc42; border-style: solid; border-width: 0.1px; outline-width: 0px; } `; const SearchButton = styled.button` display: flex; column-gap: 8px; justify-content: center; align-items: center; background-color: #d0fc42; color: #212529; width: 99px; padding: 6px 12px 6px 12px; border-radius: 0px 4px 4px 0px; border: none; :hover { background-color: #bbe33b; } `; const Title = styled.h4` color: #fff; text-align: left; `; return ( <Container> {!isSearched && <Title>Community list</Title>} <CommunitiesContainer isSearched={isSearched}> {isSearched ? filteredCommunities.map((community) => ( <Widget key={community.id} src={`${componentOwnerId}/widget/Calimero.Curb.Communities.CommunityCard`} props={{ community, }} /> )) : communities.map((community) => ( <Widget key={community.id} src={`${componentOwnerId}/widget/Calimero.Curb.Communities.CommunityCard`} props={{ community, }} /> ))} </CommunitiesContainer> </Container> );