const Profile = styled.div` .avatar { width: 15%; max-width: 180px; min-width: 100px; margin-left: 50px; background: #eee; transform: translateY(-50%); } `; const BG = styled.div` --bs-aspect-ratio: 20%; background: #eee; min-height: 120px; `; const renderAssetsEditor = () => { return ( <Profile className="overflow-hidden w-100"> <BG className="ratio rounded-4"> <div> <Widget src="nui.sking.near/widget/Input.Button" props={{ children: <i className="bi bi-pen" />, variant: "icon info", size: "md", className: "position-absolute bottom-0 end-0 m-3", }} /> </div> </BG> <div className="avatar rounded-4 border border-2 border-white ratio ratio-1x1 position-relative z-1"> <div> <Widget src="nui.sking.near/widget/Input.Button" props={{ children: <i className="bi bi-pen" />, variant: "icon info", size: "md", className: "position-absolute bottom-0 end-0 m-2", }} /> </div> </div> </Profile> ); }; return ( <div className="d-flex flex-column gap-4"> <div className="d-flex gap-2 justify-content-between align-items-center"> <h2 className="h5 fw-bold"> <span className="rounded-circle d-inline-flex align-items-center justify-content-center fw-bolder h5 me-2 mb-0" style={{ width: "48px", height: "48px", border: "1px solid #82E299", }} > 6 </span> Create DAO Assets </h2> <Widget src="nui.sking.near/widget/Input.Button" props={{ children: "Custom edit", variant: "outline info", size: "lg", }} /> </div> <div className="d-flex gap-2 justify-content-between align-items-center"> <div> <h3 className="h6 fw-bold">Set profile image and background image</h3> <p className="text-black-50 fw-light small"> Update the DAO profile image and background images below </p> </div> <Widget src="nui.sking.near/widget/Input.Button" props={{ children: ( <> Preview DAO <i className="bi bi-eye" /> </> ), variant: "outline info", size: "lg", }} /> </div> {renderAssetsEditor()} </div> );