const Header = styled.div` position: fixed; width: 100vw; height: 13vh; display: flex; padding: 20px 120px; justify-content: space-between; background: rgba(255, 255, 255, 0.09); backdrop-filter: blur(17.8px); -webkit-backdrop-filter: blur(17.8px); `; const Logo = styled.h4` font-size: 30px; background: linear-gradient(180deg, #000 0%, rgba(255, 255, 255, 0) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; text-fill-color: transparent; `; const ButtonGroup = styled.div` display: flex, flex-direction: row `; const HeaderButton = styled.span` margin-right: 80px; cursor: pointer; `; const listBtn = [ { name: "Discover", numberID: 0, }, { name: "Data Storage", numberID: 1, }, { name: "Data Marketplace", numberID: 2, }, ]; const onChange = ({ target }) => { const number = target.id; props.changePage(number); props.pageNum = number; }; return ( <Header> <Logo>WeData</Logo> <ButtonGroup> {listBtn.map((btn) => { return ( <HeaderButton className={ props.pageNum === btn.numberID && "text-decoration-underline" } onClick={onChange} id={btn.numberID} > {btn.name} </HeaderButton> ); })} </ButtonGroup> </Header> );