const ownerId = "agwaze.near"; const homeSelected = ( <svg width="41" height="40" viewBox="0 0 41 40" fill="none" xmlns="http://www.w3.org/2000/svg" > <path d="M32.5 18.4438V30C32.5 30.5304 32.2893 31.0392 31.9142 31.4142C31.5391 31.7893 31.0304 32 30.5 32H10.5C9.96957 32 9.46086 31.7893 9.08579 31.4142C8.71071 31.0392 8.5 30.5304 8.5 30V18.4438C8.49996 18.167 8.55737 17.8932 8.66861 17.6397C8.77985 17.3862 8.9425 17.1586 9.14625 16.9713L19.1462 7.53626L19.16 7.52251C19.5282 7.18768 20.008 7.00214 20.5056 7.00214C21.0033 7.00214 21.4831 7.18768 21.8512 7.52251C21.8555 7.5274 21.8601 7.532 21.865 7.53626L31.865 16.9713C32.0667 17.1596 32.2273 17.3877 32.3365 17.6411C32.4458 17.8945 32.5015 18.1678 32.5 18.4438Z" fill="#00EC97" /> </svg> ); const home = ( <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 registerSelected = ( <svg width="41" height="40" viewBox="0 0 41 40" fill="none" xmlns="http://www.w3.org/2000/svg" > <path d="M32.8988 17.06C33.3505 16.9681 33.7567 16.7229 34.0484 16.366C34.3402 16.009 34.4998 15.5623 34.5 15.1012V12C34.5 11.4696 34.2893 10.9609 33.9142 10.5858C33.5391 10.2107 33.0304 10 32.5 10H8.5C7.96957 10 7.46086 10.2107 7.08579 10.5858C6.71072 10.9609 6.5 11.4696 6.5 12V15.1012C6.50026 15.5623 6.65977 16.009 6.95156 16.366C7.24335 16.7229 7.64949 16.9681 8.10125 17.06C8.77676 17.2001 9.38335 17.5687 9.81883 18.1038C10.2543 18.6388 10.4921 19.3076 10.4921 19.9975C10.4921 20.6874 10.2543 21.3562 9.81883 21.8912C9.38335 22.4263 8.77676 22.7949 8.10125 22.935C7.64865 23.0271 7.24186 23.273 6.94998 23.631C6.65809 23.9889 6.4991 24.4369 6.5 24.8988V28C6.5 28.5304 6.71072 29.0391 7.08579 29.4142C7.46086 29.7893 7.96957 30 8.5 30H32.5C33.0304 30 33.5391 29.7893 33.9142 29.4142C34.2893 29.0391 34.5 28.5304 34.5 28V24.8988C34.4998 24.4377 34.3402 23.9909 34.0484 23.634C33.7567 23.2771 33.3505 23.0319 32.8988 22.94C32.2232 22.7999 31.6167 22.4313 31.1812 21.8962C30.7457 21.3612 30.5079 20.6924 30.5079 20.0025C30.5079 19.3126 30.7457 18.6438 31.1812 18.1088C31.6167 17.5737 32.2232 17.2051 32.8988 17.065V17.06ZM8.5 24.9C9.62962 24.6699 10.645 24.0565 11.3743 23.1637C12.1036 22.2708 12.5019 21.1534 12.5019 20.0006C12.5019 18.8478 12.1036 17.7304 11.3743 16.8376C10.645 15.9448 9.62962 15.3314 8.5 15.1012V12H15.5V28H8.5V24.9Z" fill="#00EC97" /> </svg> ); const register = ( <svg width="41" height="40" viewBox="0 0 41 40" fill="none" xmlns="http://www.w3.org/2000/svg" > <path d="M32.8988 17.06C33.3505 16.9681 33.7567 16.7229 34.0484 16.366C34.3402 16.009 34.4998 15.5623 34.5 15.1012V12C34.5 11.4696 34.2893 10.9609 33.9142 10.5858C33.5391 10.2107 33.0304 10 32.5 10H8.5C7.96957 10 7.46086 10.2107 7.08579 10.5858C6.71072 10.9609 6.5 11.4696 6.5 12V15.1012C6.50026 15.5623 6.65977 16.009 6.95156 16.366C7.24335 16.7229 7.64949 16.9681 8.10125 17.06C8.77676 17.2001 9.38335 17.5687 9.81883 18.1038C10.2543 18.6388 10.4921 19.3076 10.4921 19.9975C10.4921 20.6874 10.2543 21.3562 9.81883 21.8912C9.38335 22.4263 8.77676 22.7949 8.10125 22.935C7.64865 23.0271 7.24186 23.273 6.94998 23.631C6.65809 23.9889 6.4991 24.4369 6.5 24.8988V28C6.5 28.5304 6.71072 29.0391 7.08579 29.4142C7.46086 29.7893 7.96957 30 8.5 30H32.5C33.0304 30 33.5391 29.7893 33.9142 29.4142C34.2893 29.0391 34.5 28.5304 34.5 28V24.8988C34.4998 24.4377 34.3402 23.9909 34.0484 23.634C33.7567 23.2771 33.3505 23.0319 32.8988 22.94C32.2232 22.7999 31.6167 22.4313 31.1812 21.8962C30.7457 21.3612 30.5079 20.6924 30.5079 20.0025C30.5079 19.3126 30.7457 18.6438 31.1812 18.1088C31.6167 17.5737 32.2232 17.2051 32.8988 17.065V17.06ZM8.5 24.9C9.62962 24.6699 10.645 24.0565 11.3743 23.1637C12.1036 22.2708 12.5019 21.1534 12.5019 20.0006C12.5019 18.8478 12.1036 17.7304 11.3743 16.8376C10.645 15.9448 9.62962 15.3314 8.5 15.1012V12H15.5V28H8.5V24.9ZM32.5 24.9V28H17.5V12H32.5V15.1C31.3704 15.3301 30.355 15.9435 29.6257 16.8363C28.8964 17.7292 28.4981 18.8466 28.4981 19.9994C28.4981 21.1522 28.8964 22.2696 29.6257 23.1624C30.355 24.0552 31.3704 24.6686 32.5 24.8988V24.9Z" fill="#343330" /> </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: 0.25em 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; text-align: center; } `; const navItem = ({ text, icon, id, iconSelected }) => ( <NavItem onClick={() => props.update({ tab: id })}> {id === props.tab ? iconSelected : icon} <span>{text}</span> </NavItem> ); const NavContainer = styled.div` display: flex; flex-direction: column; margin-right: 2.5em; gap: 0.8em; @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: home, iconSelected: home, })} {navItem({ text: "List Near NFT", id: "people", icon: <Widget src="agwaze.near/widget/GenaDrop.NearLogo" />, iconSelected: <Widget src="agwaze.near/widget/GenaDrop.NearLogo" />, })} {navItem({ text: "Near NFTS", id: "people", icon: <Widget src="agwaze.near/widget/GenaDrop.NearLogo" />, iconSelected: <Widget src="agwaze.near/widget/GenaDrop.NearLogo" />, })} {navItem({ text: "EVM NFTS", id: "evm", icon: speakers, iconSelected: speakers, })} <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;