const Markets = styled.div` /* width: 388px; */ display: flex; align-items: center; flex-shrink: 0; gap: 10px; &.layer { gap: 0; height: 40px; border-radius: 20px; border: 1px solid #000; overflow: hidden; } ` const Market = styled.div` display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; width: 60px; height: 54px; cursor: pointer; border: 1px solid #373A53; background-color: rgba(33, 35, 48, 0.5); border-radius: 8px; img { width: 24px; } span { color: #979ABE; font-family: Gantari; font-size: 12px; font-style: normal; font-weight: 400; line-height: normal; } &.active { background-color: #32364B; span { color: #FFF; } } &.layer { flex-direction: row; width: auto; height: auto; padding: 10px 15px; gap: 5px; background-color: unset; border: unset; border-radius: unset; img { width: 20px; } span { color: #000; font-family: "Inter Tight"; font-size: 12px; font-style: normal; font-weight: 600; line-height: normal; } &.active { background: #000; span { color: #FFF; } } } ` const { from, markets, currentMarket, onChangeMarket } = props return ( <Markets className={from}> { markets && markets.map((market, index) => { return from === 'layer' ? ( <Market key={index} className={[from, currentMarket?.basic?.name === market?.basic?.name ? 'active' : '']} onClick={() => onChangeMarket && onChangeMarket(market)}> <img src={market?.basic?.icon} alt={market?.basic?.name} /> <span>{market?.basic?.name}</span> </Market> ) : ( <Market key={index} className={[from, currentMarket?.name === market?.name ? 'active' : '']} onClick={() => onChangeMarket && onChangeMarket(market)}> <img src={market?.icon} alt={market?.name} /> <span>{market?.name}</span> </Market> ) }) } </Markets> )