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 class="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 class="bi bi-share"></i> </Icon> <Icon> <i class="bi bi-trash3"></i> </Icon> </div> </div> </OptionsContainer> </Container> );