const StyledTabs = styled.div` background: var(--agg-secondary-color, #212233); color: var(--agg-primary-color, #fff); border: 1px solid rgb(33, 34, 51); display: flex; width: 244px; height: 52px; border-radius: 28px; -webkit-box-align: center; align-items: center; padding: 0px 4px; `; const StyledTab = styled.div` flex: 1 1 0%; display: flex; -webkit-box-align: center; align-items: center; -webkit-box-pack: center; justify-content: center; height: 44px; border-radius: 28px; font-size: 16px; font-weight: bold; cursor: pointer; transition: all 0.3s ease-in-out 0s; &.active { color: #fff; background: var(--agg-primary-color, #32364b); } &:hover { opacity: 0.8; } `; const tabs = props.tabs || []; const { active, onChange } = props; return ( <StyledTabs> {tabs.map((tab) => ( <StyledTab onClick={() => { onChange?.(tab); }} className={tab.key === active ? "active" : ""} key={tab.key} > {tab.label} </StyledTab> ))} </StyledTabs> );