State.init({ showQuestionsByThisUser: false, descriptionHeightLimited: true, poll: {}, polls: [{}], profile: {}, pollsByThisCreator: [{}], answers: [{}], }); function sliceString(string, newStringLength) { if (string.length > newStringLength) { return string.slice(0, newStringLength) + "..."; } return string; } const renderQuestionsByThisCreator = () => { return <></>; }; function showDescription(description) { if (state.descriptionHeightLimited && description.length > 501) { return description.slice(0, 500) + "..."; } else { return description; } } return ( <div> <div className="d-flex content-align-start justify-content-between"> <div style={{ width: "100%", maxWidth: "1000px", height: "1000px", margin: "2rem 0.5rem 2rem 2rem", borderRadius: "18px", background: "white", boxShadow: "0px 8px 28px rgba(43, 68, 106, 0.05)", }} > <div className="d-flex justify-content-between"> <div className="d-flex"> <Widget src="mob.near/widget/ProfileImage" props={{ profile, question: state.poll.accountId, className: "float-start d-inline-block me-2", style: { width: "3.5rem", aspectRatio: "1", marginLeft: "1rem", borderRadius: "100%", overflow: "hidden", }, }} /> <div> <p style={{ margin: "0", fontWeight: "300" }}>Created by</p> <p style={{ fontWeight: "500" }}> {sliceString(context.accountId, 18)} </p> </div> </div> </div> <div className="d-flex my-3"> <div style={{ height: "inherit", backgroundColor: "#AAC8F7", width: "0.5rem", minWidth: "5px", marginRight: "0.5rem", borderRadius: "8px", }} > {/*Decorative div, do not delete*/} </div> <h2 style={{ fontWeight: "700", fontSize: "2rem", letterSpacing: "0.1px", color: "#010A2D", wordWrap: "anywhere", }} > Instance Time </h2> </div> <div style={{ position: "relative", width: "max-content", margin: "1rem", display: "flex", }} > <div style={{ paddingRight: "2rem", display: "flex", alignItems: "center", }} > <Widget src={`vow_owner_123.near/widget/Instance_time_share`} props={{ accountId: "vow_owner_123.near" }} /> </div> <span style={{ backgroundColor: d.is_on == "on" ? "rgb(217, 252, 239)" : "rgb(255, 229, 229)", textAlign: "center", borderRadius: "16px", fontSize: "0.8rem", color: d.is_on == "on" ? "rgb(0, 179, 125)" : "rgb(255, 71, 71)", fontWeight: "500", padding: "0.5rem 1rem", }} > {d.is_on ?? "off"} </span> </div> <div className="p-3" style={{ position: "relative", border: "1.5px solid rgb(206, 212, 218)", borderRadius: "24px", wordWrap: "anywhere", width: "100%", }} > <h3 style={{ fontWeight: "700", fontSize: "1.2rem", marginBottom: "1.2rem", }} > Schedule </h3> <p style={{ fontSize: "0.9rem" }}> {showDescription(state.poll.value.description)} </p> {state.poll.value.description.length > 501 && !state.descriptionHeightLimited ? ( <div style={{ position: "absolute", bottom: "-1.125rem", left: "0", right: "0", marginRight: "auto", marginLeft: "auto", textAlign: "center", }} > <h4 style={{ fontSize: "1.2rem", display: "inline-block", backgroundColor: "white", padding: "0 1rem", cursor: "pointer", }} onClick={() => State.update({ descriptionHeightLimited: true })} > Show less <i className="bi bi-arrow-up"></i> </h4> </div> ) : ( state.poll.value.description.length > 501 && ( <div style={{ position: "absolute", bottom: "-1.125rem", left: "0", right: "0", marginRight: "auto", marginLeft: "auto", textAlign: "center", }} > <h4 style={{ fontSize: "1.2rem", display: "inline-block", backgroundColor: "white", padding: "0 1rem", cursor: "pointer", }} onClick={() => State.update({ descriptionHeightLimited: false }) } > Show more <i className="bi bi-arrow-down"></i> </h4> </div> ) )} </div> </div> </div> </div> );