const { background, src, dappName, creator, widgetPath } = props; const DappCardWrapper = styled.div` padding: 20px; display: flex; align-items: center; gap: 16px; width: 248px; height: 108px; border-radius: 20px; .icon-wrapper { width: 72px; height: 72px; border-radius: 20px; } .dapp-detail { display: flex; flex-direction: column; gap: 4px; } .dapp-name { font-size: 20px; font-weight: 700; line-height: 24px; letter-spacing: 0em; text-align: left; color: #ffffff; } .dapp-creator { font-size: 14px; font-weight: 400; line-height: 17px; letter-spacing: 0em; text-align: left; color: #979abe; } `; return ( <DappCardWrapper style={{ background, }} > <img src={src} alt="" className="icon-wrapper" /> <div className="dapp-detail"> <div className="dapp-name">{dappName}</div> <div className="dapp-creator">@{creator}</div> </div> </DappCardWrapper> );