const twitterSvg = ( <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none" > <g clip-path="url(#clip0_95_15)"> <path d="M7.99993 15.9999C12.4182 15.9999 15.9999 12.4182 15.9999 7.99993C15.9999 3.58169 12.4182 0 7.99993 0C3.58169 0 0 3.58169 0 7.99993C0 12.4182 3.58169 15.9999 7.99993 15.9999Z" fill="black" /> <path d="M12.9005 5.74925C12.5577 5.90127 12.1889 6.00408 11.8022 6.05C12.1971 5.81342 12.5001 5.43908 12.6431 4.99229C12.2736 5.21148 11.8642 5.37049 11.4288 5.45619C11.08 5.0847 10.583 4.85254 10.0327 4.85254C8.97687 4.85254 8.12052 5.70889 8.12052 6.76475C8.12052 6.91463 8.13749 7.06051 8.17029 7.20055C6.58109 7.12084 5.17199 6.3596 4.22879 5.20235C4.06423 5.48471 3.96982 5.81342 3.96982 6.1638C3.96982 6.82707 4.30766 7.41261 4.82047 7.75543C4.50716 7.74559 4.21211 7.6596 3.95442 7.516C3.95428 7.52413 3.95428 7.53225 3.95428 7.54024C3.95428 8.46675 4.61369 9.23954 5.48829 9.41509C5.328 9.45901 5.15873 9.48225 4.98461 9.48225C4.86111 9.48225 4.74146 9.47042 4.62481 9.44817C4.8681 10.2077 5.57414 10.7606 6.4111 10.7761C5.75654 11.2891 4.93213 11.5947 4.03599 11.5947C3.88198 11.5947 3.72939 11.5857 3.58008 11.5679C4.42588 12.1106 5.43125 12.4271 6.51107 12.4271C10.0283 12.4271 11.9518 9.51334 11.9518 6.98622C11.9518 6.90336 11.9499 6.82079 11.9462 6.73894C12.3201 6.46941 12.6443 6.13272 12.9005 5.74925Z" fill="white" /> </g> <defs> <clipPath id="clip0_95_15"> <rect width="16" height="16" fill="white" /> </clipPath> </defs> </svg> ); const discordSvg = ( <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none" > <g clip-path="url(#clip0_95_20)"> <path d="M7.12207 8.43973C7.12207 9.08223 6.66176 9.60504 6.08301 9.60504C5.51332 9.60504 5.04395 9.08223 5.04395 8.43973C5.04395 7.79754 5.50426 7.27441 6.08301 7.27441C6.66613 7.27441 7.13113 7.80223 7.12207 8.43973Z" fill="black" /> <path d="M10.9629 8.43973C10.9629 9.08223 10.5073 9.60504 9.92383 9.60504C9.35414 9.60504 8.88477 9.08223 8.88477 8.43973C8.88477 7.79754 9.34508 7.27441 9.92383 7.27441C10.5073 7.27441 10.972 7.80223 10.9629 8.43973Z" fill="black" /> <path d="M8 0C3.58187 0 0 3.58187 0 8C0 12.4181 3.58187 16 8 16C12.4181 16 16 12.4181 16 8C16 3.58187 12.4181 0 8 0ZM13.7159 10.9453C12.7272 11.6716 11.7691 12.1125 10.8244 12.4047C10.8094 12.4094 10.7931 12.4038 10.7837 12.3909C10.5656 12.0872 10.3675 11.7669 10.1938 11.4306C10.1838 11.4109 10.1928 11.3872 10.2134 11.3794C10.5281 11.2603 10.8275 11.1181 11.1156 10.95C11.1384 10.9366 11.1397 10.9041 11.1187 10.8884C11.0578 10.8431 10.9972 10.7953 10.9394 10.7475C10.9284 10.7388 10.9138 10.7369 10.9016 10.7428C9.03156 11.6069 6.98313 11.6069 5.09094 10.7428C5.07875 10.7375 5.06406 10.7394 5.05375 10.7481C4.99594 10.7956 4.93531 10.8431 4.87469 10.8884C4.85375 10.9041 4.85531 10.9366 4.87813 10.95C5.16625 11.115 5.46563 11.2603 5.78 11.3797C5.80063 11.3875 5.81031 11.4109 5.8 11.4306C5.63031 11.7675 5.43188 12.0875 5.20969 12.3912C5.2 12.4037 5.18406 12.4094 5.16906 12.4047C4.22875 12.1125 3.27094 11.6716 2.28187 10.9453C2.27375 10.9388 2.26781 10.9288 2.26688 10.9181C2.06562 8.76094 2.47625 6.57688 3.975 4.3375C3.97875 4.33156 3.98406 4.32688 3.99062 4.32438C4.72781 3.98563 5.51813 3.73656 6.34375 3.59437C6.35875 3.59219 6.37375 3.59906 6.38156 3.61219C6.48375 3.79312 6.60031 4.02469 6.67938 4.21406C7.54969 4.08125 8.43375 4.08125 9.3225 4.21406C9.40125 4.02875 9.51375 3.79312 9.61531 3.61219C9.62313 3.59844 9.63812 3.59156 9.65312 3.59437C10.4794 3.73687 11.2697 3.98625 12.0066 4.32438C12.0131 4.32688 12.0184 4.33156 12.0216 4.33813C13.3272 6.25844 13.9722 8.42469 13.7309 10.9187C13.73 10.9294 13.7247 10.9388 13.7159 10.9453Z" fill="black" /> </g> <defs> <clipPath id="clip0_95_20"> <rect width="16" height="16" fill="white" /> </clipPath> </defs> </svg> ); const webSvg = ( <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none" > <path d="M11.3657 4.36719C10.4534 4.55768 9.47596 4.67044 8.46875 4.69726V7.47905H11.7658C11.7354 6.38336 11.5987 5.32995 11.3657 4.36719Z" fill="black" /> <path d="M3.29616 7.47901C3.32707 6.30956 3.4734 5.18096 3.72418 4.14506C2.90293 3.91453 2.15153 3.6165 1.49989 3.2583C0.607383 4.48988 0.0879789 5.94361 0 7.47901H3.29616Z" fill="black" /> <path d="M3.29616 8.4165H0C0.0879789 9.9519 0.607383 11.4056 1.49986 12.6372C2.1515 12.279 2.90293 11.981 3.72418 11.7505C3.4734 10.7146 3.32704 9.58595 3.29616 8.4165Z" fill="black" /> <path d="M9.3481 0.48965C9.06144 0.247153 8.7671 0.0837909 8.46875 0V3.75956C9.38932 3.73393 10.2799 3.63298 11.1101 3.46421C10.9578 2.99853 10.7807 2.56114 10.5797 2.15931C10.2188 1.43742 9.80437 0.875632 9.3481 0.48965Z" fill="black" /> <path d="M3.9765 12.6519C3.2902 12.8446 2.6595 13.0876 2.10547 13.3763C2.17985 13.4569 2.25561 13.5366 2.33362 13.6146C3.23488 14.5159 4.313 15.1759 5.48973 15.5626C5.1601 15.173 4.85525 14.7024 4.58191 14.1557C4.3506 13.6931 4.1483 13.1889 3.9765 12.6519Z" fill="black" /> <path d="M5.42002 2.15931C5.21912 2.56114 5.04201 2.99853 4.88965 3.46421C5.71987 3.63298 6.61044 3.73393 7.53102 3.75956V0C7.23264 0.0838222 6.93832 0.247153 6.65166 0.48965C6.19536 0.875632 5.781 1.43742 5.42002 2.15931Z" fill="black" /> <path d="M12.7034 8.4165C12.6725 9.58595 12.5262 10.7146 12.2754 11.7505C13.0966 11.981 13.8481 12.279 14.4997 12.6372C15.3922 11.4056 15.9116 9.95193 15.9996 8.4165H12.7034Z" fill="black" /> <path d="M12.024 3.24369C12.7103 3.05095 13.341 2.80792 13.895 2.51923C13.8206 2.43863 13.7449 2.35896 13.6669 2.28095C12.7656 1.37972 11.6875 0.719677 10.5107 0.333008C10.8404 0.722615 11.1452 1.19314 11.4186 1.73979C11.6499 2.20241 11.8522 2.70672 12.024 3.24369Z" fill="black" /> <path d="M10.5797 13.7365C10.7807 13.3347 10.9578 12.8973 11.1101 12.4316C10.2799 12.2628 9.38932 12.1619 8.46875 12.1362V15.8958C8.76713 15.812 9.06144 15.6487 9.3481 15.4061C9.8044 15.0202 10.2188 14.4584 10.5797 13.7365Z" fill="black" /> <path d="M12.2754 4.14503C12.5262 5.18093 12.6725 6.30953 12.7034 7.47897H15.9996C15.9116 5.94358 15.3922 4.48985 14.4997 3.2583C13.8481 3.61647 13.0966 3.9145 12.2754 4.14503Z" fill="black" /> <path d="M8.46875 8.4165V11.1983C9.47596 11.2251 10.4534 11.3379 11.3657 11.5284C11.5987 10.5656 11.7354 9.51219 11.7658 8.4165H8.46875Z" fill="black" /> <path d="M7.53141 7.47905V4.69726C6.5242 4.67044 5.54681 4.55768 4.63445 4.36719C4.40146 5.32999 4.26475 6.38336 4.23438 7.47905H7.53141Z" fill="black" /> <path d="M3.9765 3.24369C4.14827 2.70669 4.3506 2.20241 4.58191 1.73979C4.85525 1.19314 5.1601 0.722584 5.48973 0.333008C4.31304 0.719677 3.23488 1.37972 2.33362 2.28098C2.25561 2.35899 2.17985 2.43866 2.10547 2.51926C2.6595 2.80792 3.2902 3.05095 3.9765 3.24369Z" fill="black" /> <path d="M12.024 12.6519C11.8522 13.1889 11.6499 13.6931 11.4186 14.1557C11.1452 14.7024 10.8404 15.173 10.5107 15.5626C11.6874 15.1759 12.7656 14.5159 13.6669 13.6146C13.7449 13.5366 13.8206 13.4569 13.895 13.3763C13.341 13.0876 12.7103 12.8446 12.024 12.6519Z" fill="black" /> <path d="M7.53141 8.4165H4.23438C4.26475 9.51222 4.40146 10.5656 4.63445 11.5284C5.54678 11.3379 6.5242 11.2251 7.53141 11.1983V8.4165Z" fill="black" /> <path d="M6.65166 15.4061C6.93832 15.6486 7.23267 15.812 7.53102 15.8958V12.1362C6.61044 12.1619 5.71987 12.2628 4.88965 12.4316C5.04201 12.8973 5.21909 13.3347 5.42002 13.7365C5.781 14.4584 6.19536 15.0201 6.65166 15.4061Z" fill="black" /> </svg> ); const CardRoot = styled.div` width: 315px; height: 444px; border: 1px solid #EFEFEF; background: #FFF; box-shadow: 2px 2px 12px 0px rgba(0, 0, 0, 0.05); margin-bottom: 20px; `; const Top = styled.div` img { width: 100%; height: 80px; background: black; } position: relative; width: 100%; height: 80px; background: black; `; const Bottom = styled.div` h1 { overflow: hidden; color: #000; text-overflow: ellipsis; whitespace: nowrap; font-family: Helvetica Neue; font-size: 24px; font-style: normal; font-weight: 700; line-height: normal; text-transform: uppercase; } `; const ImageProfile = styled.div` img { position: absolute; width: 66px; height: 66px; flex-shrink: 0; border: 1px solid white; border-radius: 50%; top: 45px; z-index: 99; object-fit: cover; background: black; left: 16px; } `; const Socials = styled.div` display: flex; flex-direction: row-reverse; width: 95%; gap: 7px; margin-top: 7px; `; const HeaderText = styled.div` height: 150px; `; const CardBody = styled.div` margin-top: 33px; padding: 0 16px; h1 { color: #000; font-family: Helvetica Neue; font-size: 24px; font-style: normal; font-weight: 700; line-height: normal; text-transform: uppercase; } h3 { overflow: hidden; color: #000; text-overflow: ellipsis; whitespace: nowrap; font-family: Helvetica Neue; font-size: 16px; font-style: normal; font-weight: 400; line-height: 148%; } `; const AmountSec = styled.div` width: 100%; display: flex; flex-direction: row; align-items: center; justify-content: space-between; div { span { color: #B0B0B0; font-family: Helvetica Neue; font-size: 8px; font-style: normal; font-weight: 400; line-height: normal; text-transform: uppercase; } p { color: #000; font-family: Helvetica Neue; font-size: 16px; font-style: normal; font-weight: 700; line-height: normal; text-transform: uppercase; span { color: #000; font-family: Helvetica Neue; font-size: 12px; font-style: normal; font-weight: 400; line-height: normal; text-transform: uppercase; } } } `; const CardTags = styled.div` display: flex; flex-direction: row; align-items: baseline; gap: 15px; height: 100%; padding-left: 10px; margin-top: 10px; `; const Tag = styled.div` color: #B0B0B0; text-align: center; font-family: Helvetica Neue; font-size: 12px; font-style: normal; font-weight: 500; line-height: 150%; /* 18px */ width: max-content; height: 20px; border-radius: 50px; background: #F8F8F8; display: flex; padding: 2px 16px; justify-content: center; align-items: center; gap: 8px; `; const Button = styled.div` width: 100%; display: flex; align-items: center; justify-content: center; margin-top: 10px; button { border: 1px solid black; border-radius: 0; color: white; background: black; text-align: center display: flex; width: 296px; padding: 7px 0px; cursor: pointer; } button:hover { background: white; color: black; border-color: black; } `; return ( <CardRoot> <Top> <img src={ "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRub7hFLkStCvZiaSeiUGznP4uzqPPcepghhg&usqp=CAU" } alt="" /> <ImageProfile> <img src={ props.image ?? "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRub7hFLkStCvZiaSeiUGznP4uzqPPcepghhg&usqp=CAU" } /> </ImageProfile> </Top> <Bottom> <Socials> {webSvg} {discordSvg} {twitterSvg} </Socials> <CardBody> <HeaderText> <h1>{props.title ?? `My NFT CARD`}</h1> <h3> {props.description ?? `Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.`.substring( 0, 120 )} </h3> </HeaderText> <AmountSec> <div> <span>TOTAL FUNDS</span> <p> 99.9M <span>NEAR</span> </p> </div> <div> <span>Members/Groups</span> <p> 99.9M/<span>99.9M</span> </p> </div>{" "} <div> <span>Active Proposals</span> <p> 99.9M/<span>99.9M</span> </p> </div> </AmountSec> </CardBody> <CardTags> <Tag>Category</Tag> <Tag>Tag</Tag> <Tag>Anything</Tag> </CardTags> <Button> <button>More Info</button> </Button> </Bottom> </CardRoot> );