const TabContainer = styled.div` width:50%; display: flex; justify-content: center; align-items: center; background: #373A53; border-radius: 8px; padding: 1px 2px; border: 1px #373A53 solid; `; const TabItem = styled.div` flex-grow:1; display: flex; justify-content: center; align-items: center; height: 40px; border-radius: 8px; font-weight: 500; font-size: 16px; cursor: pointer; transition: all 0.3s ease-in-o; `; const tabName = props.tabName || "stake"; return ( <TabContainer> <TabItem style={{ background: tabName === "stake" ? "#00FFA3" : "transparent", color: tabName === "stake" ? "#332C4B" : "#FFFFFF", }} onClick={() => props.updateTabName("stake")} > Stake </TabItem> <TabItem style={{ background: tabName === "unstake" ? "#00FFA3" : "transparent", color: tabName === "unstake" ? "#332C4B" : "#FFFFFF", }} onClick={() => props.updateTabName("unstake")} > Unstake </TabItem> </TabContainer> );