const contract = props.contract || 'docs.testnet'; const componentOwnerId = props.componentOwnerId || 'fran-cali.testnet'; const Container = styled.div` display: flex; justify-content: space-between; align-items: center; pading-left: 35px; padding-right: 35px; `; const AddButton = styled.div` width: 24px; height: 24px; border-radius: 50%; display: flex; justify-content: center; font-size: 1.5rem; color: #4e95ff; align-items: center; border: solid 1px #0e0e10; :hover { border: solid 1px #fff; } `; const Text = styled.div` color: #797978; font-family: Helvetica Neue; font-size: 14px; font-style: normal; font-weight: 400; line-height: 150%; `; const IconPlus = styled.div` :hover { border: solid 1px #fff; } cursor: pointer; width: 24px; height: 24px; background-color: #4e95ff; color: #fff; margin-left: 0.5rem; display: flex; justify-content: center; align-items: center; border-radius: 50%; padding-top: 2px; `; const Icon = styled.div` color: #797978; :hover { color: #fff; } cursor: pointer; `; State.init({ userList: [], userDialogOpen: false, openUserDialog: () => State.update({ userDialogOpen: true }), }); const setUserList = () => Near.asyncCalimeroView( contract, 'get_accounts_paged', {}, undefined, false, ).then((users) => { const userList = users.map((user) => user[0]); State.update({ userList: userList }); }); useEffect(() => { setUserList(); }, [state.userList]); const OptionsContainer = styled.div` display: flex; gap: 1rem; align-items: center; `; return ( <Container> <div className="d-flex gap-2"> <Widget src={`${componentOwnerId}/widget/Calimero.Curb.Navbar.UsersButtonGroup`} props={{ componentOwnerId: componentOwnerId, channelUserList: state.userList, openMemberList: state.openUserDialog, }} /> <IconPlus onClick={() => console.log('add user dialog')}> <i className="bi bi-plus-lg" /> </IconPlus> </div> <OptionsContainer> <div className="d-flex gap-2"> <Widget src={`${componentOwnerId}/widget/Calimero.DocsChain.Common.Button`} props={{ onClick: () => console.log('save'), text: 'Save', color: '#4E95FF', hoverColor: '#267DFF', width: '80px', }} /> <Widget src={`${componentOwnerId}/widget/Calimero.DocsChain.Common.Button`} props={{ onClick: () => console.log('preview'), text: 'Preview', width: '80px', }} /> </div> <div className="d-flex gap-4"> <Text> Last edited {props.lastEdit ? ( <Widget src={`${componentOwnerId}/widget/Calimero.Common.TimeFormatting`} props={{ time: (Date.now() - props.lastEdit) / 1000, }} /> ) : ( <Widget src={`${componentOwnerId}/widget/Calimero.Common.TimeFormatting`} props={{ time: Date.now() - Date.now(), }} /> )} </Text> <div className="d-flex gap-3"> <Icon> <i className="bi bi-share"></i> </Icon> <Icon> <i className="bi bi-trash3"></i> </Icon> </div> </div> </OptionsContainer> </Container> );