const Container = styled.div` display: flex; justify-content: space-between; align-items: center; background-color: #0e0e10; padding-top: 0.5rem; padding-bottom: 0.5rem; padding-left: 1rem; padding-right: 1rem; color: #777583; :hover { color: #ffffff; } @media (max-width: 1024px) { width: 100%; padding-top: 1.25rem; } `; const TextBold = styled.div` font-family: Helvetica Neue; font-size: 16px; font-style: normal; font-weight: 700; line-height: 150%; `; const IconPlusContainer = styled.div` display: flex; cursor: pointer; justify-content: center; align-items: center; font-size: 1.25rem; `; const isValidChannelName = useCallback((value) => { const regex = /^[a-zA-Z0-9_.-]+$/; if (!regex.test(value)) { return false; } return true; }, []); const CreateChannelPopup = (props) => ( <Widget src={`${props.componentOwnerId}/widget/Calimero.Common.Popups.InputPopup`} props={{ componentOwnerId: props.componentOwnerId, title: "Create new Channel", placeholder: "# channel name", buttonText: "Create", toggle: ( <IconPlusContainer> <i className="bi bi-plus-circle" /> </IconPlusContainer> ), functionLoader: props.curbApi.createGroup, validator: isValidChannelName }} /> ); return ( <Container> <TextBold>{props.title}</TextBold> <CreateChannelPopup curbApi={props.curbApi} componentOwnerId={props.componentOwnerId} /> </Container> );