const text = props.text ?? "Only owners of this NFT collection can post, comment and repost"; const groupId = props.groupId; const buttonText = props.buttonText ?? "Subscribe to Premium"; const Wrapper = styled.div` border-bottom: 1px solid #eee; margin: 0 -12px; &:hover { background-color: rgba(0, 0, 0, 0.03); } .mintbase { height: 1.5em; } `; const Locked = ( <svg xmlns="http://www.w3.org/2000/svg" className="ratio-1x1" style={{ height: "4em" }} viewBox="0 0 16 16" fill="#bbb" > <path d="M2 1a1 1 0 0 1 1-1h10a1 1 0 0 1 1 1v7.764a3 3 0 0 0-4.989 2.497 2.01 2.01 0 0 0-.743.739H6.5a.5.5 0 0 0-.5.5V16H3a1 1 0 0 1-1-1V1Zm2 1.5v1a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5Zm3 0v1a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5Zm3.5-.5a.5.5 0 0 0-.5.5v1a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5h-1ZM4 5.5v1a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5ZM7.5 5a.5.5 0 0 0-.5.5v1a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5h-1Zm2.5.5v1a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5ZM4.5 8a.5.5 0 0 0-.5.5v1a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5h-1Zm2.5.5v1a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5Z" /> <path d="M9 13a1 1 0 0 1 1-1v-1a2 2 0 1 1 4 0v1a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1h-4a1 1 0 0 1-1-1v-2Zm3-3a1 1 0 0 0-1 1v1h2v-1a1 1 0 0 0-1-1Z" /> </svg> ); const Mintbase = ( <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" className="mintbase" viewBox="0 0 694.65 182.6" > <path d="M279.58,42.49V139.9H268V58.64L245.21,139.9H216.66L193.84,58.64V139.9H182.29V42.49h18.09l24.91,86.83h11.29l24.91-86.83Z" /> <path d="M299.34,42.49h11.13V55.3H299.34Zm0,27.69h11.13V139.9H299.34Z" /> <path d="M380.32,89.39V139.9H369.19v-47c0-8.49-3.9-14.75-13.08-14.75S340,84.38,340,95v45H328.83V70.18H340v8.63A22.87,22.87,0,0,1,359.72,68.1C370.72,68.1,380.32,75.33,380.32,89.39Z" /> <path d="M402,119.86V80.2h-9.18v-10h9.32V52.79h11V70.18H428.6v10H413.16v39.38c0,9.32,3.89,11.41,10.29,11.41h5.85v10h-6C411.76,141,402,138.5,402,119.86Z" /> <path d="M493.86,92.45v25.18c0,14.47-9.32,24.35-22.26,24.35-7.94,0-14.89-3.48-18.09-8.76v6.68H442.38V42.49h11.13V76.86c3.2-5.28,10.15-8.76,18.09-8.76C484.54,68.1,493.86,78,493.86,92.45Zm-11.13.83c0-10.15-6.12-15.16-14.61-15.16s-14.61,5-14.61,15.16V116.8c0,10.15,6.12,15.16,14.61,15.16s14.61-5,14.61-15.16Z" /> <path d="M560.93,70.18V139.9H549.8v-6.68c-3.2,5.28-10.16,8.76-18.09,8.76-12.94,0-22.27-9.88-22.27-24.35V92.45c0-14.47,9.33-24.35,22.27-24.35,7.93,0,14.89,3.48,18.09,8.76V70.18ZM549.8,116.8V93.28c0-10.15-6.13-15.16-14.61-15.16s-14.61,5-14.61,15.16V116.8c0,10.15,6.12,15.16,14.61,15.16S549.8,127,549.8,116.8Z" /> <path d="M577.21,117.63v-2.22h11.13v2.64c0,9.18,5.43,13.91,15.44,13.91,6.4,0,13.5-1.94,13.5-9.73,0-7.38-5.56-9.47-16.7-13-13.49-4.17-22.4-8.2-22.4-20.73,0-15.72,14.06-20.45,24.77-20.45,11.83,0,24.63,6,24.63,22v3.2H616.45V90.36c0-9.6-7.1-12.24-13.78-12.24-7.23,0-13.08,3.06-13.08,9.46,0,6.82,6.82,9,16,11.82,14.61,4.32,23.1,9.33,23.1,22.27,0,15.44-13.08,20.31-25.32,20.31C587.64,142,577.21,133.91,577.21,117.63Z" /> <path d="M654.29,108.59v7.65c0,9.46,5.85,15.72,14.61,15.72,9.05,0,14.61-4.87,14.61-14.33h11.14c0,16.42-9.74,24.35-25.75,24.35-15.44,0-25.74-9.74-25.74-24.49V92.59c0-14.75,10.3-24.49,25.74-24.49s25.75,9.74,25.75,24.49v16Zm0-14.75V100h29.22V93.84c0-9.46-5.84-15.72-14.61-15.72S654.29,84.38,654.29,93.84Z" /> <path d="M125.14,69.86H112.48V21.21a21.28,21.28,0,1,0-8.56,17V69.86H55.08A21.21,21.21,0,0,0,33.87,91.07c0,.16,0,.31,0,.46h0v48.64H21.21a21.22,21.22,0,1,0,21.21,21.42h0V148.73H74.27a21.19,21.19,0,1,0,17-8.56H42.43v-32.1A21.19,21.19,0,0,0,72.08,78.41h31.84V91.27h0a21.21,21.21,0,1,0,21.21-21.41Zm-33.87-36a12.66,12.66,0,1,1,12.65-12.66A12.68,12.68,0,0,1,91.27,33.87Zm12.65,127.52a12.66,12.66,0,1,1-12.65-12.66A12.66,12.66,0,0,1,103.92,161.39ZM21.21,174a12.66,12.66,0,1,1,12.66-12.65A12.66,12.66,0,0,1,21.21,174Zm33.87-70.31A12.66,12.66,0,1,1,67.74,91.07,12.67,12.67,0,0,1,55.08,103.73Zm70.06,0a12.66,12.66,0,1,1,12.65-12.66A12.68,12.68,0,0,1,125.14,103.73Z" /> </svg> ); return ( <Wrapper className="d-flex align-items-center flex-row p-2"> <div className="me-3">{Locked}</div> <div className="flex-grow-1"> <p>{text}</p> <div> <a className="btn btn-outline-primary rounded-5 text-nowrap" href={`/mintbase.near/widget/nft-marketplace?contracts=${groupId}&affiliateAccount=mob.near`} > Buy with {Mintbase} </a> </div> </div> </Wrapper> );