const Container = styled.div` border-radius: 21px; padding: 24px; box-shadow: rgba(0, 0, 0, 0.1) -4px 9px 25px -6px; max-width: 860px; margin: auto; width: 100%; `; State.init({ expandDescription: false, }); function sliceString(string, newStringLength) { if (string.length > newStringLength) { return string.slice(0, newStringLength) + "..."; } return string; } const widgetOwner = "sking.near"; const indexVersion = props.indexVersion ?? "3.2.0"; const whitelist = props.whitelist; const blockHeight = props.blockHeight; const poll = props.poll; const href = props.href; const Label = styled.div` font-size: 15px; font-weight: 500; color: #000; background-color: #ebedee; padding: 4px 10px; border-radius: 6px; margin-top: auto; margin-bottom: auto; `; return ( <Container> <div className="d-flex mb-4"> <div style={{ height: "inherit", backgroundColor: "#ffd50d", width: "0.5rem", minWidth: "5px", marginRight: "0.5rem", borderRadius: "8px", }} > {/*Decorative div, do not delete*/} </div> <h2 style={{ fontWeight: "500", fontSize: "32px", letterSpacing: "-1px", color: "#010A2D", marginTop: "auto", marginBottom: "auto", marginRight: "auto", }} > {poll.value.title} <div style={{ position: "relative", width: "max-content", display: "inline-block", fontSize: 24, marginLeft: 9, color: "#4f46e5", }} > <Widget src={`${widgetOwner}/widget/EasyPoll.Share`} props={{ blockHeight: blockHeight }} /> </div> </h2> <Widget src={`${widgetOwner}/widget/EasyPoll.PollMoreOptions`} props={{ poll: poll, href: href }} /> </div> <div className="d-flex flex-grow-1 gap-3 flex-wrap justify-content-between align-content-center align-items-center mb-5"> <Widget src={`${widgetOwner}/widget/EasyPoll.UserLabel`} props={{ accountId: poll.accountId }} /> <Widget src={`${widgetOwner}/widget/EasyPoll.PollTags`} props={{ poll: poll, indexVersion, showVoteButton: false }} /> </div> <div className="mb-4"> <h3 style={{ fontWeight: "600", fontSize: 15, color: "#828688", opacity: 0.8, }} > Description </h3> <div style={{ fontSize: "15px", maxHeight: "3000px", transition: "all 500ms ease", overflow: "auto", }} > <Markdown text={ state.expandDescription ? poll.value.description : sliceString(poll.value.description, 300) } /> </div> {poll.value.description.length > 300 && state.expandDescription ? ( <div style={{ fontSize: "15px", fontWeight: 700, }} onClick={() => State.update({ expandDescription: false })} role="button" > Show less <i className="bi bi-arrow-up"></i> </div> ) : ( poll.value.description.length > 300 && ( <div style={{ fontSize: "15px", fontWeight: 700, }} onClick={() => State.update({ expandDescription: true })} role="button" > Show more <i className="bi bi-arrow-down"></i> </div> ) )} </div> {poll.value.tgLink != "" && poll.value.tgLink != undefined && ( <div className="mb-4 d-flex justify-content-between" style={{ border: "1.5px solid #4f46e520", padding: "12px", borderRadius: "16px", }} > <div className="d-flex"> <i className="bi bi-people d-flex align-items-center justify-content-center" style={{ height: "100%", aspectRatio: "1", backgroundColor: "#4f46e5", borderRadius: "14px", marginRight: "1rem", color: "white", }} ></i> <div> <p className="m-0" style={{ fontWeight: "600", fontSize: 15, color: "#828688", opacity: 0.8, }} > Discussion link </p> <h6> <a className="w-100 text-truncate" href={poll.value.tgLink}> {poll.value.tgLink} </a> </h6> </div> </div> <div className="d-flex align-items-center"> <a target="_blank" href={poll.value.tgLink} style={{ userSelect: "none" }} > <i className="bi bi-box-arrow-up-right"></i> </a> <i role="button" className="bi bi-clipboard" style={{ userSelect: "none", marginLeft: "15px", color: "#4f46e5", }} onClick={() => clipboard.writeText(poll.value.tgLink)} ></i> </div> </div> )} <Widget src={`${widgetOwner}/widget/EasyPoll.Vote`} props={{ poll: poll, indexVersion, widgetOwner, blockHeight }} /> </Container> );