const ownerId = "nearcon23.near23.near23.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="41" height="40" viewBox="0 0 41 40" fill="none" xmlns="http://www.w3.org/2000/svg" > <path d="M31.8538 16.9713L21.8538 7.53626C21.8489 7.532 21.8443 7.5274 21.84 7.52251C21.4718 7.18768 20.992 7.00214 20.4944 7.00214C19.9967 7.00214 19.5169 7.18768 19.1488 7.52251L19.135 7.53626L9.14625 16.9713C8.9425 17.1586 8.77985 17.3862 8.66861 17.6397C8.55737 17.8932 8.49996 18.167 8.5 18.4438V30C8.5 30.5304 8.71071 31.0392 9.08579 31.4142C9.46086 31.7893 9.96957 32 10.5 32H30.5C31.0304 32 31.5391 31.7893 31.9142 31.4142C32.2893 31.0392 32.5 30.5304 32.5 30V18.4438C32.5 18.167 32.4426 17.8932 32.3314 17.6397C32.2201 17.3862 32.0575 17.1586 31.8538 16.9713ZM30.5 30H10.5V18.4438L10.5138 18.4313L20.5 9.00001L30.4875 18.4288L30.5012 18.4413L30.5 30Z" fill="#343330" /> </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 hackathonSelected = ( <svg width="41" height="40" viewBox="0 0 41 40" fill="none" xmlns="http://www.w3.org/2000/svg" > <path d="M31.5 9H9.5C8.96957 9 8.46086 9.21071 8.08579 9.58579C7.71071 9.96086 7.5 10.4696 7.5 11V29C7.5 29.5304 7.71071 30.0391 8.08579 30.4142C8.46086 30.7893 8.96957 31 9.5 31H31.5C32.0304 31 32.5391 30.7893 32.9142 30.4142C33.2893 30.0391 33.5 29.5304 33.5 29V11C33.5 10.4696 33.2893 9.96086 32.9142 9.58579C32.5391 9.21071 32.0304 9 31.5 9ZM16.1 22.2C16.3122 22.3591 16.4524 22.596 16.4899 22.8586C16.5275 23.1211 16.4591 23.3878 16.3 23.6C16.1409 23.8122 15.904 23.9524 15.6414 23.99C15.3789 24.0275 15.1122 23.9591 14.9 23.8L10.9 20.8C10.7758 20.7069 10.675 20.5861 10.6056 20.4472C10.5361 20.3084 10.5 20.1552 10.5 20C10.5 19.8448 10.5361 19.6916 10.6056 19.5528C10.675 19.4139 10.7758 19.2931 10.9 19.2L14.9 16.2C15.1122 16.0409 15.3789 15.9725 15.6414 16.0101C15.904 16.0476 16.1409 16.1878 16.3 16.4C16.4591 16.6122 16.5275 16.8789 16.4899 17.1414C16.4524 17.404 16.3122 17.6409 16.1 17.8L13.1663 20L16.1 22.2ZM23.4613 13.275L19.4613 27.275C19.4272 27.4035 19.3678 27.5239 19.2866 27.6292C19.2054 27.7345 19.1041 27.8225 18.9885 27.8882C18.8728 27.9538 18.7453 27.9958 18.6133 28.0115C18.4813 28.0273 18.3475 28.0166 18.2196 27.98C18.0918 27.9434 17.9726 27.8818 17.8689 27.7986C17.7652 27.7154 17.6791 27.6123 17.6157 27.4955C17.5523 27.3786 17.5129 27.2503 17.4996 27.118C17.4864 26.9857 17.4997 26.8521 17.5387 26.725L21.5387 12.725C21.6156 12.4747 21.7876 12.2645 22.0178 12.1396C22.248 12.0147 22.518 11.9851 22.7697 12.0571C23.0215 12.1292 23.235 12.2971 23.3643 12.5248C23.4936 12.7525 23.5284 13.0219 23.4613 13.275ZM30.1 20.8L26.1 23.8C25.8878 23.9591 25.6211 24.0275 25.3586 23.99C25.096 23.9524 24.8591 23.8122 24.7 23.6C24.5409 23.3878 24.4725 23.1211 24.51 22.8586C24.5476 22.596 24.6878 22.3591 24.9 22.2L27.8337 20L24.9 17.8C24.7949 17.7212 24.7064 17.6225 24.6395 17.5095C24.5726 17.3965 24.5286 17.2714 24.51 17.1414C24.4915 17.0114 24.4987 16.879 24.5313 16.7518C24.5639 16.6246 24.6212 16.5051 24.7 16.4C24.7788 16.2949 24.8775 16.2064 24.9905 16.1395C25.1035 16.0726 25.2286 16.0286 25.3586 16.0101C25.4886 15.9915 25.621 15.9987 25.7482 16.0313C25.8754 16.0639 25.9949 16.1212 26.1 16.2L30.1 19.2C30.2242 19.2931 30.325 19.4139 30.3944 19.5528C30.4639 19.6916 30.5 19.8448 30.5 20C30.5 20.1552 30.4639 20.3084 30.3944 20.4472C30.325 20.5861 30.2242 20.7069 30.1 20.8Z" fill="#00EC97" /> </svg> ); const hackathon = ( <svg width="41" height="40" viewBox="0 0 41 40" fill="none" xmlns="http://www.w3.org/2000/svg" > <path d="M13.1399 15.7688L8.06244 20L13.1399 24.2313C13.2438 24.3144 13.3299 24.4173 13.3935 24.5341C13.457 24.6509 13.4966 24.7793 13.5099 24.9116C13.5233 25.0438 13.5101 25.1775 13.4712 25.3046C13.4323 25.4318 13.3684 25.5499 13.2833 25.652C13.1982 25.7542 13.0935 25.8384 12.9755 25.8996C12.8574 25.9608 12.7284 25.9979 12.5959 26.0086C12.4633 26.0194 12.33 26.0036 12.2036 25.9622C12.0772 25.9208 11.9604 25.8546 11.8599 25.7675L5.85994 20.7675C5.74736 20.6737 5.65678 20.5562 5.59462 20.4235C5.53246 20.2907 5.50024 20.1459 5.50024 19.9994C5.50024 19.8528 5.53246 19.708 5.59462 19.5753C5.65678 19.4426 5.74736 19.3251 5.85994 19.2313L11.8599 14.2313C12.0638 14.0615 12.3268 13.9797 12.591 14.0039C12.8552 14.028 13.099 14.1561 13.2687 14.36C13.4384 14.5639 13.5202 14.8268 13.4961 15.091C13.4719 15.3552 13.3438 15.599 13.1399 15.7688ZM35.1399 19.2313L29.1399 14.2313C29.039 14.1472 28.9225 14.0839 28.797 14.0449C28.6716 14.0058 28.5397 13.9919 28.4089 14.0039C28.2781 14.0158 28.1509 14.0534 28.0346 14.1145C27.9183 14.1756 27.8152 14.259 27.7312 14.36C27.5615 14.5639 27.4797 14.8268 27.5038 15.091C27.528 15.3552 27.6561 15.599 27.8599 15.7688L32.9374 20L27.8599 24.2313C27.7561 24.3144 27.6699 24.4173 27.6064 24.5341C27.5429 24.6509 27.5033 24.7793 27.4899 24.9116C27.4766 25.0438 27.4898 25.1775 27.5287 25.3046C27.5676 25.4318 27.6315 25.5499 27.7166 25.652C27.8017 25.7542 27.9064 25.8384 28.0244 25.8996C28.1424 25.9608 28.2715 25.9979 28.404 26.0086C28.5366 26.0194 28.6699 26.0036 28.7963 25.9622C28.9226 25.9208 29.0395 25.8546 29.1399 25.7675L35.1399 20.7675C35.2525 20.6737 35.3431 20.5562 35.4053 20.4235C35.4674 20.2907 35.4996 20.1459 35.4996 19.9994C35.4996 19.8528 35.4674 19.708 35.4053 19.5753C35.3431 19.4426 35.2525 19.3251 35.1399 19.2313ZM24.8412 8.06C24.7178 8.01519 24.5867 7.99512 24.4555 8.00096C24.3243 8.00679 24.1955 8.03841 24.0766 8.09401C23.9576 8.14961 23.8507 8.2281 23.7621 8.325C23.6734 8.4219 23.6048 8.53531 23.5599 8.65875L15.5599 30.6588C15.5149 30.7823 15.4947 30.9134 15.5005 31.0448C15.5062 31.1761 15.5378 31.305 15.5934 31.4242C15.649 31.5433 15.7276 31.6503 15.8246 31.739C15.9216 31.8277 16.0351 31.8964 16.1587 31.9413C16.2683 31.9802 16.3837 32.0001 16.4999 32C16.7053 32 16.9057 31.9368 17.0739 31.8189C17.242 31.7011 17.3699 31.5343 17.4399 31.3413L25.4399 9.34125C25.4848 9.21781 25.5048 9.08675 25.499 8.95555C25.4932 8.82436 25.4615 8.69559 25.4059 8.57662C25.3503 8.45764 25.2718 8.35078 25.1749 8.26214C25.078 8.1735 24.9646 8.10481 24.8412 8.06Z" fill="#343330" /> </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; &: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 href={`/${ownerId}/widget/Index?tab=${id}`} 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; `; return ( <NavContainer> {navItem({ text: "Home", id: "home", icon: home, iconSelected: homeSelected, })} {navItem({ text: "Register", id: "register", icon: register, iconSelected: registerSelected, })} {navItem({ text: "Hackathon", id: "hackathon", icon: hackathon, iconSelected: hackathonSelected, })} </NavContainer> );