console.log(props); const updatePage = props.updatePage ? props.updatePage : (page) => { console.log(page); }; const HeaderWrapper = styled.div` background-color: #001529; color: #fff; padding: 16px; display: flex; justify-content: space-between; a{ text-decoration: none; color: inherit; } @media (max-width: 768px) { padding: 8px; } `; const Logo = styled.div` font-size: 24px; font-weight: bold; display: flex; align-items: center; @media (max-width: 768px) { font-size: 20px; } `; const Nav = styled.div` display: flex; align-items: center; @media (max-width: 768px) { flex-direction: column; margin-top: 8px; } `; const NavItem = styled.div` margin-left: 16px; cursor: pointer; @media (max-width: 768px) { margin: 8px 0; } `; const logoStyle = { display: "flex", alignItems: "center", justifyContent: "center", width: "100px", height: "100px", }; const Header = () => { return ( <HeaderWrapper> <a href="https://near.org/s-farshad-k.near/widget/index"> <Logo> <Widget src="mob.near/widget/Image" props={{ fallbackUrl: "https://svgur.com/i/udF.svg", style: logoStyle, alt: "EthWinners", }} /> EthWinners </Logo> </a> <Nav> <a href="#" onClick={() => updatePage("home")}> <NavItem>Home</NavItem> </a> <a href="#" onClick={() => updatePage("about")}> <NavItem>About</NavItem> </a> <a href="#" onClick={() => updatePage("contact")}> <NavItem>Contact</NavItem> </a> </Nav> </HeaderWrapper> ); }; return <Header />;