const Container = styled.div` position: relative; min-height: 64px; background-color: #00EC97; display: flex; align-items: center; justify-content: space-between; width: 100%; padding-right:20px; @media only screen and (max-width: 800px) { display: block; .toggle { padding-left:20px; padding-top:10px; padding-bottom:10px; } } `; const TitleBarText = styled.h3` position: absolute; top: 50%; transform: translateY(-50%); padding-left: 20px; color: #000000; font-size: 20px; font-weight: 600; `; return ( <Container> <div> <svg width="100%" height="64" viewBox="0 0 393 64" fill="none" xmlns="http://www.w3.org/2000/svg" > <g clip-path="url(#clip0_1305_46356)"> <rect width="393" height="64" fill="#00EC97" /> <g> <path d="M609.374 -253.113L342.549 -77.5629L102.747 -288.54C75.3478 -312.646 35.8672 -278.326 55.9253 -247.839L231.475 18.9862L20.4984 258.789C-3.60739 286.188 30.7125 325.668 61.1997 305.61L328.024 130.06L567.821 341.036C595.22 365.142 634.7 330.822 614.642 300.335L439.092 33.5104L650.075 -206.292C674.181 -233.69 639.861 -273.171 609.374 -253.113ZM335.276 26.4438L335.098 26.2384L335.303 26.0598L335.482 26.2652L335.276 26.4438Z" fill="#00fba2" /> </g> <g clip-path="url(#clip1_1305_46356)"> <path d="M397.672 65.631L393.882 65.1182L393.369 61.3283C393.306 60.8906 392.681 60.8906 392.631 61.3283L392.118 65.1182L388.328 65.631C387.891 65.6936 387.891 66.3189 388.328 66.369L392.118 66.8818L392.631 70.6717C392.694 71.1094 393.319 71.1094 393.369 70.6717L393.882 66.8818L397.672 66.369C398.109 66.3064 398.109 65.6811 397.672 65.631Z" fill="white" /> <path d="M332.672 65.631L328.882 65.1182L328.369 61.3283C328.306 60.8906 327.681 60.8906 327.631 61.3283L327.118 65.1182L323.328 65.631C322.891 65.6936 322.891 66.3189 323.328 66.369L327.118 66.8818L327.631 70.6717C327.694 71.1094 328.319 71.1094 328.369 70.6717L328.882 66.8818L332.672 66.369C333.109 66.3064 333.109 65.6811 332.672 65.631Z" fill="white" /> <path d="M266.672 65.631L262.882 65.1182L262.369 61.3283C262.306 60.8906 261.681 60.8906 261.631 61.3283L261.118 65.1182L257.328 65.631C256.891 65.6936 256.891 66.3189 257.328 66.369L261.118 66.8818L261.631 70.6717C261.694 71.1094 262.319 71.1094 262.369 70.6717L262.882 66.8818L266.672 66.369C267.109 66.3064 267.109 65.6811 266.672 65.631Z" fill="white" /> <path d="M201.672 65.631L197.882 65.1182L197.369 61.3283C197.306 60.8906 196.681 60.8906 196.631 61.3283L196.118 65.1182L192.328 65.631C191.891 65.6936 191.891 66.3189 192.328 66.369L196.118 66.8818L196.631 70.6717C196.694 71.1094 197.319 71.1094 197.369 70.6717L197.882 66.8818L201.672 66.369C202.109 66.3064 202.109 65.6811 201.672 65.631Z" fill="white" /> <path d="M135.672 65.631L131.882 65.1182L131.369 61.3283C131.306 60.8906 130.681 60.8906 130.631 61.3283L130.118 65.1182L126.328 65.631C125.891 65.6936 125.891 66.3189 126.328 66.369L130.118 66.8818L130.631 70.6717C130.694 71.1094 131.319 71.1094 131.369 70.6717L131.882 66.8818L135.672 66.369C136.109 66.3064 136.109 65.6811 135.672 65.631Z" fill="white" /> <path d="M70.6717 65.631L66.8818 65.1182L66.369 61.3283C66.3064 60.8906 65.6811 60.8906 65.631 61.3283L65.1182 65.1182L61.3283 65.631C60.8906 65.6936 60.8906 66.3189 61.3283 66.369L65.1182 66.8818L65.631 70.6717C65.6936 71.1094 66.3189 71.1094 66.369 70.6717L66.8818 66.8818L70.6717 66.369C71.1094 66.3064 71.1094 65.6811 70.6717 65.631Z" fill="white" /> <path d="M4.67167 65.631L0.881801 65.1182L0.368981 61.3283C0.306442 60.8906 -0.318949 60.8906 -0.36898 61.3283L-0.881801 65.1182L-4.67167 65.631C-5.10944 65.6936 -5.10944 66.3189 -4.67167 66.369L-0.881801 66.8818L-0.36898 70.6717C-0.306441 71.1094 0.31895 71.1094 0.368981 70.6717L0.881801 66.8818L4.67167 66.369C5.10944 66.3064 5.10944 65.6811 4.67167 65.631Z" fill="white" /> <path d="M397.672 -0.36898L393.882 -0.881801L393.369 -4.67167C393.306 -5.10944 392.681 -5.10944 392.631 -4.67167L392.118 -0.881801L388.328 -0.36898C387.891 -0.306441 387.891 0.31895 388.328 0.368981L392.118 0.881801L392.631 4.67167C392.694 5.10944 393.319 5.10944 393.369 4.67167L393.882 0.881801L397.672 0.368981C398.109 0.306442 398.109 -0.318949 397.672 -0.36898Z" fill="white" /> <path d="M332.672 -0.36898L328.882 -0.881801L328.369 -4.67167C328.306 -5.10944 327.681 -5.10944 327.631 -4.67167L327.118 -0.881801L323.328 -0.36898C322.891 -0.306441 322.891 0.31895 323.328 0.368981L327.118 0.881801L327.631 4.67167C327.694 5.10944 328.319 5.10944 328.369 4.67167L328.882 0.881801L332.672 0.368981C333.109 0.306442 333.109 -0.318949 332.672 -0.36898Z" fill="white" /> <path d="M266.672 -0.36898L262.882 -0.881801L262.369 -4.67167C262.306 -5.10944 261.681 -5.10944 261.631 -4.67167L261.118 -0.881801L257.328 -0.36898C256.891 -0.306441 256.891 0.31895 257.328 0.368981L261.118 0.881801L261.631 4.67167C261.694 5.10944 262.319 5.10944 262.369 4.67167L262.882 0.881801L266.672 0.368981C267.109 0.306442 267.109 -0.318949 266.672 -0.36898Z" fill="white" /> <path d="M201.672 -0.36898L197.882 -0.881801L197.369 -4.67167C197.306 -5.10944 196.681 -5.10944 196.631 -4.67167L196.118 -0.881801L192.328 -0.36898C191.891 -0.306441 191.891 0.31895 192.328 0.368981L196.118 0.881801L196.631 4.67167C196.694 5.10944 197.319 5.10944 197.369 4.67167L197.882 0.881801L201.672 0.368981C202.109 0.306442 202.109 -0.318949 201.672 -0.36898Z" fill="white" /> <path d="M135.672 -0.36898L131.882 -0.881801L131.369 -4.67167C131.306 -5.10944 130.681 -5.10944 130.631 -4.67167L130.118 -0.881801L126.328 -0.36898C125.891 -0.306441 125.891 0.31895 126.328 0.368981L130.118 0.881801L130.631 4.67167C130.694 5.10944 131.319 5.10944 131.369 4.67167L131.882 0.881801L135.672 0.368981C136.109 0.306442 136.109 -0.318949 135.672 -0.36898Z" fill="white" /> <path d="M70.6717 -0.36898L66.8818 -0.881801L66.369 -4.67167C66.3064 -5.10944 65.6811 -5.10944 65.631 -4.67167L65.1182 -0.881801L61.3283 -0.36898C60.8906 -0.306441 60.8906 0.31895 61.3283 0.368981L65.1182 0.881801L65.631 4.67167C65.6936 5.10944 66.3189 5.10944 66.369 4.67167L66.8818 0.881801L70.6717 0.368981C71.1094 0.306442 71.1094 -0.318949 70.6717 -0.36898Z" fill="white" /> <path d="M4.67167 -0.36898L0.881801 -0.881801L0.368981 -4.67167C0.306442 -5.10944 -0.318949 -5.10944 -0.36898 -4.67167L-0.881801 -0.881801L-4.67167 -0.36898C-5.10944 -0.306441 -5.10944 0.31895 -4.67167 0.368981L-0.881801 0.881801L-0.36898 4.67167C-0.306441 5.10944 0.31895 5.10944 0.368981 4.67167L0.881801 0.881801L4.67167 0.368981C5.10944 0.306442 5.10944 -0.318949 4.67167 -0.36898Z" fill="white" /> </g> </g> <defs> <clipPath id="clip0_1305_46356"> <rect width="393" height="64" fill="white" /> </clipPath> <clipPath id="clip1_1305_46356"> <rect width="393" height="990" fill="white" /> </clipPath> </defs> </svg> <TitleBarText>{props.label || ""}</TitleBarText> </div> {props.admin && ( <div className="toggle"> <Widget src="nearpad.testnet/widget/Inputs.Toggle2" props={{ rightLabel: "Admin", onChange: () => { props?.onChange?.(); }, }} /> </div> )} </Container> );