const selectedButton = props.selectedButton; const setSelectedButton = props.setSelectedButton; const ownerId = "nearcon23.near"; const Container = styled.div` width: 100%; background-color: #000000; padding: 20px; display: flex; justify-content: space-around; align-items: center; `; const Button = styled.button` display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 2px; border: none; color: ${(p) => (p?.selected ? "#FFFFFF" : "#00EC97")}; background-color: transparent; :hover * { color: #FFFFFF !important; } `; const Icon = styled.div` height: 40px; width: 40px; display: flex; justify-content: center; align-items: center; `; const H5 = styled.h6` background-color: transparent; color: currentColor; border: none; font-size: 13px; font-weight: 500; `; return ( <Container> <Link to="/mobile"> <Button selected={selectedButton === "profile"} onClick={() => setSelectedButton("profile")} > <Icon> <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg" > <path d="M28.8652 27.5C28.7774 27.6521 28.6512 27.7783 28.4991 27.8661C28.347 27.9539 28.1746 28 27.999 28H3.99897C3.82353 27.9998 3.65121 27.9535 3.49933 27.8656C3.34746 27.7778 3.22137 27.6515 3.13372 27.4996C3.04607 27.3476 2.99995 27.1752 3 26.9997C3.00005 26.8243 3.04625 26.6519 3.13397 26.5C5.03772 23.2087 7.97147 20.8487 11.3952 19.73C9.70168 18.7218 8.38591 17.1856 7.64996 15.3572C6.91401 13.5289 6.79858 11.5095 7.3214 9.6092C7.84422 7.70889 8.97638 6.03274 10.544 4.83816C12.1116 3.64357 14.0281 2.9966 15.999 2.9966C17.9699 2.9966 19.8863 3.64357 21.4539 4.83816C23.0216 6.03274 24.1537 7.70889 24.6765 9.6092C25.1994 11.5095 25.0839 13.5289 24.348 15.3572C23.612 17.1856 22.2963 18.7218 20.6027 19.73C24.0265 20.8487 26.9602 23.2087 28.864 26.5C28.9519 26.6519 28.9984 26.8243 28.9986 26.9998C28.9988 27.1754 28.9528 27.3479 28.8652 27.5Z" fill="currentColor" /> </svg> </Icon> <H5>Me</H5> </Button> </Link> <Link to="/mobile"> <Button selected={selectedButton === "alerts"} onClick={() => setSelectedButton("alerts")} > <Icon> {selectedButton === "alerts" ? ( <Widget src={`${ownerId}/widget/Icons.SelectedAlerts`} /> ) : ( <svg width="33" height="32" viewBox="0 0 33 32" fill="none" xmlns="http://www.w3.org/2000/svg" > <path d="M21.2512 28C21.2512 28.2652 21.1459 28.5196 20.9583 28.7071C20.7708 28.8946 20.5164 29 20.2512 29H12.2512C11.986 29 11.7316 28.8946 11.5441 28.7071C11.3566 28.5196 11.2512 28.2652 11.2512 28C11.2512 27.7348 11.3566 27.4804 11.5441 27.2929C11.7316 27.1054 11.986 27 12.2512 27H20.2512C20.5164 27 20.7708 27.1054 20.9583 27.2929C21.1459 27.4804 21.2512 27.7348 21.2512 28ZM27.9825 24C27.809 24.3056 27.5571 24.5595 27.2527 24.7353C26.9484 24.911 26.6027 25.0024 26.2512 25H6.25121C5.89963 24.9995 5.55439 24.9064 5.25028 24.73C4.94617 24.5535 4.69394 24.3 4.51902 23.9951C4.3441 23.6901 4.25266 23.3444 4.25392 22.9928C4.25518 22.6412 4.3491 22.2962 4.52621 21.9925C5.21996 20.7975 6.25121 17.4175 6.25121 13C6.25121 10.3478 7.30478 7.8043 9.18014 5.92893C11.0555 4.05357 13.599 3 16.2512 3C18.9034 3 21.4469 4.05357 23.3223 5.92893C25.1976 7.8043 26.2512 10.3478 26.2512 13C26.2512 17.4163 27.2837 20.7975 27.9775 21.9925C28.1563 22.2966 28.251 22.6429 28.2516 22.9957C28.2523 23.3486 28.1589 23.6952 27.9812 24H27.9825ZM26.2512 23C25.285 21.3412 24.2512 17.5063 24.2512 13C24.2512 10.8783 23.4084 8.84344 21.9081 7.34315C20.4078 5.84285 18.3729 5 16.2512 5C14.1295 5 12.0946 5.84285 10.5944 7.34315C9.09406 8.84344 8.25121 10.8783 8.25121 13C8.25121 17.5075 7.21621 21.3425 6.25121 23H26.2512Z" fill="currentColor" /> </svg> )} </Icon> <H5>Alerts</H5> </Button> </Link> <Link to="/mobile"> <Button selected={selectedButton === "map"} onClick={() => setSelectedButton("map")} > <Icon> {selectedButton === "map" ? ( <svg xmlns="http://www.w3.org/2000/svg" width="27" height="24" viewBox="0 0 27 24" fill="none" > <path d="M26.115 2.21127C25.9952 2.11793 25.8557 2.0531 25.7072 2.02169C25.5586 1.99029 25.4048 1.99314 25.2575 2.03002L17.6162 3.94002L9.9475 0.105017C9.73383 -0.00155801 9.48908 -0.0281613 9.2575 0.0300175L1.2575 2.03002C1.04116 2.08409 0.849103 2.20893 0.711853 2.38468C0.574602 2.56044 0.500034 2.77702 0.5 3.00002V21C0.500023 21.152 0.534674 21.3019 0.601321 21.4385C0.667968 21.575 0.764859 21.6946 0.884633 21.7881C1.00441 21.8816 1.14392 21.9466 1.29256 21.9781C1.44121 22.0096 1.59508 22.0069 1.7425 21.97L9.38375 20.06L17.0525 23.895C17.1917 23.9637 17.3448 23.9996 17.5 24C17.5818 24 17.6632 23.9899 17.7425 23.97L25.7425 21.97C25.9588 21.9159 26.1509 21.7911 26.2881 21.6154C26.4254 21.4396 26.5 21.223 26.5 21V3.00002C26.5 2.84792 26.4654 2.69783 26.3987 2.56115C26.3319 2.42447 26.2349 2.3048 26.115 2.21127ZM9.5 18C9.41824 18.0001 9.3368 18.0101 9.2575 18.03L2.5 19.7188V3.78127L9.38375 2.06002L9.5 2.11752V18ZM24.5 20.2188L17.6162 21.94L17.5 21.8825V6.00002C17.5817 6.00038 17.6631 5.99072 17.7425 5.97127L24.5 4.28127V20.2188Z" fill="white" /> </svg> ) : ( <svg width="33" height="32" viewBox="0 0 33 32" fill="none" xmlns="http://www.w3.org/2000/svg" > <path d="M29.115 6.21125C28.9952 6.11791 28.8557 6.05308 28.7072 6.02168C28.5586 5.99027 28.4048 5.99312 28.2575 6.03L20.6162 7.94L12.9475 4.105C12.7338 3.99842 12.4891 3.97182 12.2575 4.03L4.2575 6.03C4.04116 6.08408 3.8491 6.20891 3.71185 6.38467C3.5746 6.56042 3.50003 6.777 3.5 7V25C3.50002 25.152 3.53467 25.3019 3.60132 25.4385C3.66797 25.575 3.76486 25.6946 3.88463 25.7881C4.00441 25.8816 4.14392 25.9466 4.29256 25.9781C4.44121 26.0096 4.59508 26.0068 4.7425 25.97L12.3837 24.06L20.0525 27.895C20.1917 27.9636 20.3448 27.9995 20.5 28C20.5818 28 20.6632 27.9899 20.7425 27.97L28.7425 25.97C28.9588 25.9159 29.1509 25.7911 29.2881 25.6153C29.4254 25.4396 29.5 25.223 29.5 25V7C29.5 6.84791 29.4654 6.69781 29.3987 6.56113C29.3319 6.42445 29.2349 6.30479 29.115 6.21125ZM13.5 6.6175L19.5 9.6175V25.3825L13.5 22.3825V6.6175ZM5.5 7.78125L11.5 6.28125V22.2188L5.5 23.7188V7.78125ZM27.5 24.2188L21.5 25.7188V9.78125L27.5 8.28125V24.2188Z" fill="currentColor" /> </svg> )} </Icon> <H5>Map</H5> </Button> </Link> <Link to="/mobile"> <Button selected={selectedButton === "schedule"} onClick={() => setSelectedButton("schedule")} > <Icon> {selectedButton === "schedule" ? ( <Widget src={`${ownerId}/widget/Icons.SelectedSchedule`} /> ) : ( <svg width="33" height="32" viewBox="0 0 33 32" fill="none" xmlns="http://www.w3.org/2000/svg" > <path d="M26.75 4H23.75V3C23.75 2.73478 23.6446 2.48043 23.4571 2.29289C23.2696 2.10536 23.0152 2 22.75 2C22.4848 2 22.2304 2.10536 22.0429 2.29289C21.8554 2.48043 21.75 2.73478 21.75 3V4H11.75V3C11.75 2.73478 11.6446 2.48043 11.4571 2.29289C11.2696 2.10536 11.0152 2 10.75 2C10.4848 2 10.2304 2.10536 10.0429 2.29289C9.85536 2.48043 9.75 2.73478 9.75 3V4H6.75C6.21957 4 5.71086 4.21071 5.33579 4.58579C4.96071 4.96086 4.75 5.46957 4.75 6V26C4.75 26.5304 4.96071 27.0391 5.33579 27.4142C5.71086 27.7893 6.21957 28 6.75 28H26.75C27.2804 28 27.7891 27.7893 28.1642 27.4142C28.5393 27.0391 28.75 26.5304 28.75 26V6C28.75 5.46957 28.5393 4.96086 28.1642 4.58579C27.7891 4.21071 27.2804 4 26.75 4ZM9.75 6V7C9.75 7.26522 9.85536 7.51957 10.0429 7.70711C10.2304 7.89464 10.4848 8 10.75 8C11.0152 8 11.2696 7.89464 11.4571 7.70711C11.6446 7.51957 11.75 7.26522 11.75 7V6H21.75V7C21.75 7.26522 21.8554 7.51957 22.0429 7.70711C22.2304 7.89464 22.4848 8 22.75 8C23.0152 8 23.2696 7.89464 23.4571 7.70711C23.6446 7.51957 23.75 7.26522 23.75 7V6H26.75V10H6.75V6H9.75ZM26.75 26H6.75V12H26.75V26ZM21.9575 15.2925C22.0505 15.3854 22.1242 15.4957 22.1746 15.6171C22.2249 15.7385 22.2508 15.8686 22.2508 16C22.2508 16.1314 22.2249 16.2615 22.1746 16.3829C22.1242 16.5043 22.0505 16.6146 21.9575 16.7075L15.9575 22.7075C15.8646 22.8005 15.7543 22.8742 15.6329 22.9246C15.5115 22.9749 15.3814 23.0008 15.25 23.0008C15.1186 23.0008 14.9885 22.9749 14.8671 22.9246C14.7457 22.8742 14.6354 22.8005 14.5425 22.7075L11.5425 19.7075C11.3549 19.5199 11.2494 19.2654 11.2494 19C11.2494 18.7346 11.3549 18.4801 11.5425 18.2925C11.7301 18.1049 11.9846 17.9994 12.25 17.9994C12.5154 17.9994 12.7699 18.1049 12.9575 18.2925L15.25 20.5863L20.5425 15.2925C20.6354 15.1995 20.7457 15.1258 20.8671 15.0754C20.9885 15.0251 21.1186 14.9992 21.25 14.9992C21.3814 14.9992 21.5115 15.0251 21.6329 15.0754C21.7543 15.1258 21.8646 15.1995 21.9575 15.2925Z" fill="currentColor" /> </svg> )} </Icon> <H5>Schedule</H5> </Button> </Link> <Link to="/mobile"> <Button selected={selectedButton === "help"} onClick={() => setSelectedButton("help")} > <Icon> {selectedButton === "help" ? ( <Widget src={`${ownerId}/widget/Icons.SelectedHelp`} /> ) : ( <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" > <path d="M9.09 9C9.3251 8.33167 9.78915 7.76811 10.4 7.40913C11.0108 7.05016 11.7289 6.91894 12.4272 7.03871C13.1255 7.15849 13.7588 7.52152 14.2151 8.06353C14.6713 8.60553 14.9211 9.29152 14.92 10C14.92 12 11.92 13 11.92 13M12 17H12.01M22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" /> </svg> )} </Icon> <H5>Help</H5> </Button> </Link> </Container> );