const ownerId = "agwaze.near"; const createSelected = ( <svg width="25" height="23" viewBox="0 0 25 23" fill="none" xmlns="http://www.w3.org/2000/svg" > <g clip-path="url(#clip0_9_5)"> <path d="M3.125 15.6875V19.75H7.03125L18.5521 7.76836L14.6458 3.70586L3.125 15.6875ZM21.5729 4.62669C21.9792 4.20419 21.9792 3.52169 21.5729 3.09919L19.1354 0.564189C18.7292 0.141689 18.0729 0.141689 17.6667 0.564189L15.7604 2.54669L19.6667 6.60919L21.5729 4.62669Z" fill="#0D99FF" /> </g> <defs> <clipPath id="clip0_9_5"> <rect width="25" height="26" fill="white" transform="translate(0 -3)" /> </clipPath> </defs> </svg> ); const create = ( <svg width="25" height="23" viewBox="0 0 25 23" fill="none" xmlns="http://www.w3.org/2000/svg" > <g clip-path="url(#clip0_9_5)"> <path d="M3.125 15.6875V19.75H7.03125L18.5521 7.76836L14.6458 3.70586L3.125 15.6875ZM21.5729 4.62669C21.9792 4.20419 21.9792 3.52169 21.5729 3.09919L19.1354 0.564189C18.7292 0.141689 18.0729 0.141689 17.6667 0.564189L15.7604 2.54669L19.6667 6.60919L21.5729 4.62669Z" fill="black" /> </g> <defs> <clipPath id="clip0_9_5"> <rect width="25" height="26" fill="white" transform="translate(0 -3)" /> </clipPath> </defs> </svg> ); const people = ( <svg width="33" height="32" viewBox="0 0 33 32" fill="none" xmlns="http://www.w3.org/2000/svg" > <path d="M15.1563 19.74C16.4966 18.8477 17.5141 17.5479 18.0584 16.0326C18.6028 14.5173 18.645 12.867 18.1789 11.3259C17.7129 9.78472 16.7632 8.43447 15.4703 7.47479C14.1775 6.51511 12.6102 5.99696 11.0001 5.99696C9.38997 5.99696 7.82261 6.51511 6.52978 7.47479C5.23694 8.43447 4.28726 9.78472 3.82118 11.3259C3.35509 12.867 3.39734 14.5173 3.94168 16.0326C4.48603 17.5479 5.50356 18.8477 6.84381 19.74C4.41943 20.6336 2.34894 22.287 0.941312 24.4538C0.867332 24.5637 0.815945 24.6873 0.790139 24.8173C0.764332 24.9473 0.764621 25.0811 0.790989 25.2109C0.817356 25.3408 0.869276 25.4642 0.94373 25.5738C1.01818 25.6834 1.11369 25.7772 1.22469 25.8496C1.33569 25.922 1.45998 25.9716 1.59032 25.9955C1.72067 26.0195 1.85447 26.0173 1.98396 25.9891C2.11344 25.9608 2.23603 25.9072 2.34458 25.8311C2.45314 25.7551 2.54551 25.6583 2.61631 25.5463C3.5243 24.1497 4.76676 23.0022 6.23086 22.2077C7.69496 21.4133 9.33432 20.9972 11.0001 20.9972C12.6658 20.9972 14.3052 21.4133 15.7693 22.2077C17.2334 23.0022 18.4758 24.1497 19.3838 25.5463C19.5305 25.7642 19.7571 25.9158 20.0145 25.968C20.272 26.0203 20.5397 25.9691 20.7598 25.8256C20.9799 25.6821 21.1346 25.4577 21.1906 25.201C21.2465 24.9443 21.1992 24.6759 21.0588 24.4538C19.6512 22.287 17.5807 20.6336 15.1563 19.74ZM5.50006 13.5C5.50006 12.4122 5.82263 11.3488 6.42698 10.4444C7.03133 9.5399 7.89031 8.83495 8.8953 8.41867C9.9003 8.00239 11.0062 7.89347 12.0731 8.10569C13.14 8.31791 14.12 8.84173 14.8891 9.61092C15.6583 10.3801 16.1822 11.3601 16.3944 12.427C16.6066 13.4939 16.4977 14.5998 16.0814 15.6048C15.6651 16.6098 14.9602 17.4687 14.0557 18.0731C13.1512 18.6774 12.0879 19 11.0001 19C9.54188 18.9984 8.14389 18.4184 7.1128 17.3873C6.08171 16.3562 5.50172 14.9582 5.50006 13.5ZM31.7676 25.8375C31.5454 25.9824 31.2749 26.033 31.0154 25.9784C30.7559 25.9238 30.5287 25.7684 30.3838 25.5463C29.4769 24.1489 28.2346 23.0008 26.7702 22.2067C25.3058 21.4126 23.6659 20.9978 22.0001 21C21.7348 21 21.4805 20.8947 21.293 20.7071C21.1054 20.5196 21.0001 20.2652 21.0001 20C21.0001 19.7348 21.1054 19.4804 21.293 19.2929C21.4805 19.1054 21.7348 19 22.0001 19C22.81 18.9992 23.6098 18.8196 24.3423 18.4739C25.0748 18.1282 25.7219 17.625 26.2373 17.0002C26.7528 16.3755 27.1239 15.6445 27.3242 14.8597C27.5244 14.0749 27.5488 13.2555 27.3957 12.4602C27.2426 11.6648 26.9157 10.9131 26.4383 10.2588C25.961 9.60438 25.345 9.06352 24.6344 8.6748C23.9239 8.28608 23.1362 8.0591 22.3277 8.01009C21.5192 7.96107 20.7099 8.09123 19.9576 8.39126C19.8349 8.44428 19.7028 8.47219 19.5692 8.47332C19.4356 8.47445 19.3031 8.44878 19.1795 8.39783C19.056 8.34688 18.9439 8.27169 18.8499 8.17669C18.7559 8.0817 18.6819 7.96882 18.6323 7.84474C18.5827 7.72066 18.5584 7.58789 18.5609 7.45428C18.5635 7.32067 18.5928 7.18892 18.6471 7.06682C18.7015 6.94472 18.7797 6.83476 18.8772 6.74341C18.9748 6.65207 19.0897 6.5812 19.2151 6.53501C20.9369 5.84832 22.852 5.82361 24.591 6.46564C26.33 7.10767 27.7696 8.37095 28.6321 10.0118C29.4946 11.6526 29.7189 13.5547 29.2617 15.3512C28.8045 17.1476 27.6982 18.7111 26.1563 19.74C28.5807 20.6336 30.6512 22.287 32.0588 24.4538C32.2037 24.6759 32.2543 24.9464 32.1997 25.2059C32.1451 25.4654 31.9897 25.6926 31.7676 25.8375Z" fill="black" /> </svg> ); const aiLogo = ( <svg width="35" height="35" viewBox="0 0 35 35" fill="none" xmlns="http://www.w3.org/2000/svg" > <path d="M10.885 23.9451L12.2682 28.1998C12.3076 28.3211 12.3781 28.4299 12.4727 28.5154C12.5673 28.601 12.6827 28.6602 12.8073 28.6872C12.9319 28.7142 13.0615 28.708 13.183 28.6693C13.3045 28.6307 13.4137 28.5608 13.4998 28.4667L19.6671 21.7394" stroke="black" stroke-linecap="round" stroke-linejoin="round" /> <path d="M27.6252 18.2561C27.6252 18.2561 26.8523 22.3519 22.2811 22.3519C17.71 22.3519 14.8291 16.711 11.3859 16.711C7.31864 16.711 6.25041 20.1257 6.25041 22.3519C6.25041 24.2521 7.25958 25.0243 8.59541 25.0243C9.93125 25.0243 12.425 22.7675 13.494 21.6096H19.4002" stroke="black" stroke-linecap="round" stroke-linejoin="round" /> <path d="M11.3859 16.7118C11.3859 14.7525 9.8124 13.238 7.34854 13.238C4.88469 13.238 3.28125 14.4557 3.28125 17.8989C3.28125 21.342 6.25844 22.0245 6.25844 22.0245" stroke="black" stroke-linecap="round" stroke-linejoin="round" /> <path d="M5.29083 13.6361C4.36187 11.1847 6.66531 8.785 10.228 8.785C15.6311 8.785 16.1204 17.5569 21.3011 17.5569C25.6061 17.5569 28.4929 11.9736 26.5263 8.75583C23.9137 4.48 19.5453 5.26604 17.7042 7.0175" stroke="black" stroke-linecap="round" stroke-linejoin="round" /> <path d="M10.228 8.785C11.208 5.48916 16.1212 5.38562 18.0658 7.33031C20.0105 9.275 19.9063 12.0502 17.1777 15.0901M24.0939 16.7118C26.1851 19.2493 31.3257 18.8964 31.6969 13.8644C32.068 8.83239 27.6624 8.91333 26.7823 9.2502" stroke="black" stroke-linecap="round" stroke-linejoin="round" /> </svg> ); const selectedAILogo = ( <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg" > <path d="M28 14.6667V12H25.3333V9.33333C25.3312 8.62674 25.0496 7.94969 24.55 7.45005C24.0503 6.95041 23.3733 6.66878 22.6667 6.66667H20V4H17.3333V6.66667H14.6667V4H12V6.66667H9.33333C8.62674 6.66878 7.94969 6.95041 7.45005 7.45005C6.95041 7.94969 6.66878 8.62674 6.66667 9.33333V12H4V14.6667H6.66667V17.3333H4V20H6.66667V22.6667C6.66878 23.3733 6.95041 24.0503 7.45005 24.55C7.94969 25.0496 8.62674 25.3312 9.33333 25.3333H12V28H14.6667V25.3333H17.3333V28H20V25.3333H22.6667C23.3733 25.3312 24.0503 25.0496 24.55 24.55C25.0496 24.0503 25.3312 23.3733 25.3333 22.6667V20H28V17.3333H25.3333V14.6667H28ZM22.6667 22.6667H9.33333V9.33333H22.6667V22.6667Z" fill="#0D99FF" /> <path d="M15.148 10.6667H13.3547L10.6747 21.3333H12.044L12.6627 18.8333H15.7507L16.3533 21.3333H17.7693L15.148 10.6667ZM12.8427 17.7653L14.2 11.9333H14.2613L15.572 17.7653H12.8427ZM18.992 10.6667H20.3253V21.3333H18.992V10.6667Z" fill="#0D99FF" /> </svg> ); const peopleSelected = ( <svg width="35" height="35" viewBox="0 0 35 35" fill="none" xmlns="http://www.w3.org/2000/svg" > <path d="M10.885 23.9451L12.2682 28.1998C12.3076 28.3211 12.3781 28.4299 12.4727 28.5154C12.5673 28.601 12.6827 28.6602 12.8073 28.6872C12.9319 28.7142 13.0615 28.708 13.183 28.6693C13.3045 28.6307 13.4137 28.5608 13.4998 28.4667L19.6671 21.7394" stroke="#0D99FF" stroke-linecap="round" stroke-linejoin="round" /> <path d="M27.6252 18.2561C27.6252 18.2561 26.8523 22.3519 22.2811 22.3519C17.71 22.3519 14.8291 16.711 11.3859 16.711C7.31864 16.711 6.25041 20.1257 6.25041 22.3519C6.25041 24.2521 7.25958 25.0243 8.59541 25.0243C9.93125 25.0243 12.425 22.7675 13.494 21.6096H19.4002" stroke="#0D99FF" stroke-linecap="round" stroke-linejoin="round" /> <path d="M11.3859 16.7118C11.3859 14.7525 9.8124 13.238 7.34854 13.238C4.88469 13.238 3.28125 14.4557 3.28125 17.8989C3.28125 21.342 6.25844 22.0245 6.25844 22.0245" stroke="#0D99FF" stroke-linecap="round" stroke-linejoin="round" /> <path d="M5.29083 13.6361C4.36187 11.1847 6.66531 8.785 10.228 8.785C15.6311 8.785 16.1204 17.5569 21.3011 17.5569C25.6061 17.5569 28.4929 11.9736 26.5263 8.75583C23.9137 4.48 19.5453 5.26604 17.7042 7.0175" stroke="#0D99FF" stroke-linecap="round" stroke-linejoin="round" /> <path d="M10.228 8.785C11.208 5.48916 16.1212 5.38562 18.0658 7.33031C20.0105 9.275 19.9063 12.0502 17.1777 15.0901M24.0939 16.7118C26.1851 19.2493 31.3257 18.8964 31.6969 13.8644C32.068 8.83239 27.6624 8.91333 26.7823 9.2502" stroke="#0D99FF" stroke-linecap="round" stroke-linejoin="round" /> </svg> ); const list = ( <svg width="25" height="23" viewBox="0 0 25 23" fill="none" xmlns="http://www.w3.org/2000/svg" > <path d="M0.5 11.5C0.5 10.4422 1.23904 9.7 2.02703 9.7C2.81502 9.7 3.55405 10.4422 3.55405 11.5C3.55405 12.5578 2.81502 13.3 2.02703 13.3C1.23904 13.3 0.5 12.5578 0.5 11.5ZM0.5 2.3C0.5 1.24225 1.23904 0.5 2.02703 0.5C2.81502 0.5 3.55405 1.24225 3.55405 2.3C3.55405 3.35775 2.81502 4.1 2.02703 4.1C1.23904 4.1 0.5 3.35775 0.5 2.3ZM0.5 20.7C0.5 19.6553 1.24104 18.9 2.02703 18.9C2.81301 18.9 3.55405 19.6553 3.55405 20.7C3.55405 21.7424 2.8015 22.5 2.02703 22.5C1.25255 22.5 0.5 21.7424 0.5 20.7ZM24.5 19.6667V21.7333H6.58108V19.6667H24.5ZM24.5 10.4667V12.5333H6.58108V10.4667H24.5ZM24.5 3.33333H6.58108V1.26667H24.5V3.33333Z" fill="black" /> <path d="M0.5 11.5C0.5 10.4422 1.23904 9.7 2.02703 9.7C2.81502 9.7 3.55405 10.4422 3.55405 11.5C3.55405 12.5578 2.81502 13.3 2.02703 13.3C1.23904 13.3 0.5 12.5578 0.5 11.5ZM0.5 2.3C0.5 1.24225 1.23904 0.5 2.02703 0.5C2.81502 0.5 3.55405 1.24225 3.55405 2.3C3.55405 3.35775 2.81502 4.1 2.02703 4.1C1.23904 4.1 0.5 3.35775 0.5 2.3ZM0.5 20.7C0.5 19.6553 1.24104 18.9 2.02703 18.9C2.81301 18.9 3.55405 19.6553 3.55405 20.7C3.55405 21.7424 2.8015 22.5 2.02703 22.5C1.25255 22.5 0.5 21.7424 0.5 20.7ZM24.5 19.6667V21.7333H6.58108V19.6667H24.5ZM24.5 10.4667V12.5333H6.58108V10.4667H24.5ZM24.5 3.33333H6.58108V1.26667H24.5V3.33333Z" stroke="black" /> <path d="M0.5 11.5C0.5 10.4422 1.23904 9.7 2.02703 9.7C2.81502 9.7 3.55405 10.4422 3.55405 11.5C3.55405 12.5578 2.81502 13.3 2.02703 13.3C1.23904 13.3 0.5 12.5578 0.5 11.5ZM0.5 2.3C0.5 1.24225 1.23904 0.5 2.02703 0.5C2.81502 0.5 3.55405 1.24225 3.55405 2.3C3.55405 3.35775 2.81502 4.1 2.02703 4.1C1.23904 4.1 0.5 3.35775 0.5 2.3ZM0.5 20.7C0.5 19.6553 1.24104 18.9 2.02703 18.9C2.81301 18.9 3.55405 19.6553 3.55405 20.7C3.55405 21.7424 2.8015 22.5 2.02703 22.5C1.25255 22.5 0.5 21.7424 0.5 20.7ZM24.5 19.6667V21.7333H6.58108V19.6667H24.5ZM24.5 10.4667V12.5333H6.58108V10.4667H24.5ZM24.5 3.33333H6.58108V1.26667H24.5V3.33333Z" stroke="black" stroke-opacity="0.2" /> </svg> ); const listSelected = ( <svg width="25" height="23" viewBox="0 0 25 23" fill="none" xmlns="http://www.w3.org/2000/svg" > <path d="M0.5 11.5C0.5 10.4422 1.23904 9.7 2.02703 9.7C2.81502 9.7 3.55405 10.4422 3.55405 11.5C3.55405 12.5578 2.81502 13.3 2.02703 13.3C1.23904 13.3 0.5 12.5578 0.5 11.5ZM0.5 2.3C0.5 1.24225 1.23904 0.5 2.02703 0.5C2.81502 0.5 3.55405 1.24225 3.55405 2.3C3.55405 3.35775 2.81502 4.1 2.02703 4.1C1.23904 4.1 0.5 3.35775 0.5 2.3ZM0.5 20.7C0.5 19.6553 1.24104 18.9 2.02703 18.9C2.81301 18.9 3.55405 19.6553 3.55405 20.7C3.55405 21.7424 2.8015 22.5 2.02703 22.5C1.25255 22.5 0.5 21.7424 0.5 20.7ZM24.5 19.6667V21.7333H6.58108V19.6667H24.5ZM24.5 10.4667V12.5333H6.58108V10.4667H24.5ZM24.5 3.33333H6.58108V1.26667H24.5V3.33333Z" fill="#0D99FF" /> <path d="M0.5 11.5C0.5 10.4422 1.23904 9.7 2.02703 9.7C2.81502 9.7 3.55405 10.4422 3.55405 11.5C3.55405 12.5578 2.81502 13.3 2.02703 13.3C1.23904 13.3 0.5 12.5578 0.5 11.5ZM0.5 2.3C0.5 1.24225 1.23904 0.5 2.02703 0.5C2.81502 0.5 3.55405 1.24225 3.55405 2.3C3.55405 3.35775 2.81502 4.1 2.02703 4.1C1.23904 4.1 0.5 3.35775 0.5 2.3ZM0.5 20.7C0.5 19.6553 1.24104 18.9 2.02703 18.9C2.81301 18.9 3.55405 19.6553 3.55405 20.7C3.55405 21.7424 2.8015 22.5 2.02703 22.5C1.25255 22.5 0.5 21.7424 0.5 20.7ZM24.5 19.6667V21.7333H6.58108V19.6667H24.5ZM24.5 10.4667V12.5333H6.58108V10.4667H24.5ZM24.5 3.33333H6.58108V1.26667H24.5V3.33333Z" stroke="black" /> <path d="M0.5 11.5C0.5 10.4422 1.23904 9.7 2.02703 9.7C2.81502 9.7 3.55405 10.4422 3.55405 11.5C3.55405 12.5578 2.81502 13.3 2.02703 13.3C1.23904 13.3 0.5 12.5578 0.5 11.5ZM0.5 2.3C0.5 1.24225 1.23904 0.5 2.02703 0.5C2.81502 0.5 3.55405 1.24225 3.55405 2.3C3.55405 3.35775 2.81502 4.1 2.02703 4.1C1.23904 4.1 0.5 3.35775 0.5 2.3ZM0.5 20.7C0.5 19.6553 1.24104 18.9 2.02703 18.9C2.81301 18.9 3.55405 19.6553 3.55405 20.7C3.55405 21.7424 2.8015 22.5 2.02703 22.5C1.25255 22.5 0.5 21.7424 0.5 20.7ZM24.5 19.6667V21.7333H6.58108V19.6667H24.5ZM24.5 10.4667V12.5333H6.58108V10.4667H24.5ZM24.5 3.33333H6.58108V1.26667H24.5V3.33333Z" stroke="#0D99FF" /> </svg> ); const speakers = ( <svg width="20" height="25" viewBox="0 0 20 30" fill="none" xmlns="http://www.w3.org/2000/svg" > <g clip-path="url(#clip0_7_6)"> <path d="M9.99695 0L9.77859 0.683453V20.5157L9.99695 20.7164L19.994 15.2748L9.99695 0Z" fill="#343434" /> <path d="M9.99703 0L0 15.2748L9.99703 20.7165V11.0905V0Z" fill="#8C8C8C" /> <path d="M9.99695 22.4595L9.8739 22.5976V29.6623L9.99695 29.9933L19.9999 17.0206L9.99695 22.4595Z" fill="#3C3C3B" /> <path d="M9.99703 29.9932V22.4594L0 17.0205L9.99703 29.9932Z" fill="#8C8C8C" /> <path d="M9.99695 20.7164L19.9938 15.2749L9.99695 11.0906V20.7164Z" fill="#141414" /> <path d="M0.000305176 15.2749L9.99718 20.7164V11.0906L0.000305176 15.2749Z" fill="#393939" /> </g> <defs> <clipPath id="clip0_7_6"> <rect width="20" height="30" fill="white" /> </clipPath> </defs> </svg> ); const NavItem = styled.a` position: relative; cursor: pointer; padding: 0.5em; margin: 1.5em 0; font-style: normal; font-weight: 600; font-size: 0.8em; line-height: 1em; color: #3a3f42; border-radius: 5px; text-decoration: none; transition: background-color 0.2s ease-in-out; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 0.75em; @media screen and (max-width: 768px) { width: 100%; flex-direction: row; } &:hover { color: #667085; text-decoration: none; background-color: #f9fafb; } span { display: flex; align-items: center; justify-content: center; font-size: 10px; text-align: center; } `; const NavSelected = styled.div` color: #0d99ff; display: flex; align-items: center; justify-content: center; font-size: 10px; text-align: center; `; const navItem = ({ text, icon, id, iconSelected }) => ( <NavItem href={`#/${ownerId}/widget/GenaDrop.index?tab=${id}`} onClick={() => props.update({ tab: id })} > {id === props.tab ? iconSelected : icon} {id === props.tab ? <NavSelected>{text}</NavSelected> : <span>{text}</span>} </NavItem> ); const NavContainer = styled.div` display: flex; flex-direction: column; margin-right: 2.5em; gap: 0.8em; background: linear-gradient(180deg,#e4f1fb 0%, rgba(0,255,0,0) 3%); background: -webkit-linear-gradient(180deg,#e4f1fb 0%, rgba(0,255,0,0) 3%); background: -moz-linear-gradient(270deg,#e4f1fb 0%, rgba(0,255,0,0) 3%); @media screen and (max-width: 768px) { width: 100%; } `; const rotateLeft = styled.keyframes` from { transform: rotate(0deg); } to { transform: rotate(-90deg); } `; const rotateRight = styled.keyframes` from { transform: rotate(-90deg); } to { transform: rotate(0deg); } `; const Trigger = styled("Collapsible.Trigger")` display: flex; flex-direction: row; align-items: center; justify-content: center; border-radius: 100px; padding: 0.5em; border: none; background-color: #f9fafb; transition: transform 0.25s ease-in-out; width: 40px; height: 40px; &[data-state="open"] { transform: rotate(-90deg); } &[data-state="closed"] { transform: rotate(0deg); } `; const slideRight = styled.keyframes` from { width: 0; height: 0; } to { width: var(--radix-collapsible-content-width); height: var(--radix-collapsible-content-height); } `; const slideLeft = styled.keyframes` from { width: var(--radix-collapsible-content-width); height: var(--radix-collapsible-content-height); } to { width: 0; height: 0; } `; const Content = styled("Collapsible.Content")` width: 100%; overflow: hidden; &[data-state="open"] { animation: ${slideRight} 0.25s ease-out; } &[data-state="closed"] { animation: ${slideLeft} 0.25s ease-out; } `; const Root = styled("Collapsible.Root")` dislay: flex; flex-direction: column; align-items: flex-end; justify-content: flex-start; transition: all 0.25s ease-in-out; gap: 1.5em; width: 100%; margin-bottom: 1.5em; &[data-state="open"] { display: flex; } &[data-state="closed"] { display: flex; } `; const Divider = styled.hr` background-color: #eceef0; height: 1px; border: none; width: 100%; `; const content = ( <NavContainer> {navItem({ text: "Create", id: "create", icon: create, iconSelected: createSelected, })} {navItem({ text: "List Near NFT", id: "list", icon: list, iconSelected: listSelected, })} {navItem({ text: "Near NFTS", id: "nearNFTs", icon: <Widget src="agwaze.near/widget/GenaDrop.NearLogo" />, iconSelected: <Widget src="agwaze.near/widget/GenaDrop.NearLogo" />, })} {navItem({ text: "EVM NFTS", id: "evmNFTs", icon: speakers, iconSelected: speakers, })} {navItem({ text: "AI", id: "ai", icon: aiLogo, iconSelected: selectedAILogo, })} {navItem({ text: "Socials", id: "socials", icon: people, iconSelected: peopleSelected, })} <Divider /> </NavContainer> ); if (props.collapsible) { return ( <Root> <Trigger> <svg width="20" height="14" viewBox="0 0 20 14" fill="none" xmlns="http://www.w3.org/2000/svg" > <path d="M1 7H19M1 1H19M1 13H19" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" /> </svg> </Trigger> <Content>{content}</Content> </Root> ); } return content;