const result = props.result; const index = props.index; const totalVotes = props.totalVotes; const downvotes = totalVotes - result[2].toNumber(); console.log(totalVotes, downvotes); const H2 = styled.h2` font-size: 20px; font-weight: 600; color: #11181C; a { color: inherit; transition: color .15s ease; &:hover { color: #30A46C; text-decoration: none; & + i { visibility: visible; } } & + i { transition: visibility .1s ease-out; visibility: hidden; color: #30A46C; } } `; const H6 = styled.h6` font-size: 14px; font-weight: 500; color: #687076; `; const Trancate = styled.span` text-overflow: ellipsis; overflow: hidden; `; const TopicName = styled.span` color: #006ADC; font-weight: 500; font-size: 14px; white-space: nowrap; `; const CardWrapper = styled.div` z-index: 100; padding: 6px; `; const Card = styled.div` display: flex; flex-direction: column; justify-content: stretch; gap: 12px; width: 275px; border-radius: 12px; z-index: 1070; background: #fff; border: 1px solid #eceef0; box-shadow: 0 0 20px rgba(0, 0, 0, 0.2); padding: 12px; `; const Item = styled.div` padding: 0; .btn { width: 100%; text-align: left; &:hover, &:focus { background-color: #ECEDEE; text-decoration: none; outline: none; } &.report-btn, &.hide-btn { i { color: #7E868C; } } span { font-weight: 500; } } `; return ( <div class="row"> <div class="col-sm-1 col-2 d-flex"> <Widget src="ethpraguedemo.near/widget/Progress-Pool-Question-Button-Upvote" props={{ upvotes: result[2].toNumber() }} /> <Widget src="ethpraguedemo.near/widget/Progress-Pool-Question-Button-Downvote" style="margin-left: 2px;" props={{ downvotes: downvotes }} /> </div> <div class="col-10"> <div class="row"> <div class="col"> <div class="row"> <div class="col" style={{ marginLeft: "8px" }}> <H2 class="ml-6"> <a href={result[0]}>{result[0]}</a> <i class="bi bi-arrow-right" /> </H2> </div> </div> </div> </div> </div> </div> );