const Wrapper = styled.div` display: flex; align-items: center; &.layer { &.isDapps { align-items: flex-start; } } ` const StyledTipsAndPoolsContainer = styled.div` display: flex; flex-direction: column; gap: 20px; ` const StyledTips = styled.div` display: flex; flex-direction: column; gap: 10px; ` const StyledTipsFirstTxt = styled.div` color: #000; font-family: "Inter Tight"; font-size: 20px; font-style: normal; font-weight: 700; line-height: normal; ` const StyledTipsSecondTxt = styled.div` color: #6F6F6F; font-family: "Inter Tight"; font-size: 16px; font-style: normal; font-weight: 400; line-height: normal; ` const Pools = styled.div` margin-right: 16px; display: flex; padding: 4px; border: 1px solid #373A53; border-radius: 8px; background: var(--agg-secondary-color,rgba(33, 35, 48, 0.5)); &.layer { border-radius: 22px; } ` const Pool = styled.div` cursor: pointer; color: var(--agg-primary-color,#FFF); font-size: 14px; line-height: 1em; padding: 8px 10px; border-radius: 8px; border: 1px solid transparent; &.active { border-color: #373A53; background: #32364B; } &.layer { border-radius: 22px; display: flex; align-items: center; padding: 0 26px; height: 44px; font-family: "Inter Tight"; font-size: 16px; font-style: normal; font-weight: 600; line-height: normal; border: none; &.active { color: #FFF; background: #000; } } ` const StyledSearchAndChainsContainer = styled.div` display: flex; align-items: center; justify-content: space-between; flex: 1; &.layer { justify-content: flex-end; gap: 10px; &.isDapps { flex-direction: column; align-items: flex-end; gap: 20px; } } ` const Search = styled.div` position: relative; width: 276px; height: 40px; padding-left: 40px; border-radius: 8px; border: 1px solid #373A53; background: var(--agg-secondary-color,rgba(33, 35, 48, 0.5)); ` const Input = styled.input` border: none; outline: none; background: transparent; padding: 0; width: 100%; height: 100%; color: var(--agg-primary-color, #FFF); font-size: 14px; `; const SvgIcon = styled.div` display: flex; justify-content: center; align-items: center; &.icon-search { position: absolute; left: 12px; top: 12px; } ` const ChainsOrMarketsWrapper = styled.div` /* flex: 1; */ display: flex; justify-content: flex-end; ` const Chains = styled.div` display: flex; padding: 4px; border: 1px solid #373A53; border-radius: 8px; background: var(--agg-secondary-color,rgba(33, 35, 48, 0.5)); ` const Chain = styled.div` cursor: pointer; padding: 4px 8px; border-radius: 8px; border: 1px solid transparent; img { width: 24px; } &.active { border-color: #373A53; background: #32364B; } ` 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 StyledLayerCurrentChain = styled.div` display: flex; align-items: center; gap: 8px; padding: 0 35px 0 12px; height: 40px; border-radius: 30px; border: 1px solid #000; background: rgba(255, 255, 255, 0.80); backdrop-filter: blur(5px); cursor: pointer; img { width: 26px; } span { color: #000; font-family: "Inter Tight"; font-size: 16px; font-style: normal; font-weight: 500; line-height: normal; } svg { position: absolute; right: 13px; top: 50%; transform: translateY(-50%); } ` const StyledLayerChainsWrap = styled.div` display: none; position: absolute; left: -11px; bottom: 0; padding-top: 8px; transform: translateY(100%); ` const StyledLayerChains = styled.div` padding: 5px 0; width: 228px; border-radius: 12px; border: 1px solid #F0F0F0; background: #FFF; box-shadow: 0px 15px 30px 0px rgba(0, 0, 0, 0.30); ` const StyledLayerChainsContainer = styled.div` position: relative; &:hover { ${StyledLayerChainsWrap} { display: flex; flex-direction: column; } } ` const StyledLayerChain = styled.div` display: flex; align-items: center; gap: 9px; position: relative; height: 45px; padding-left: 20px; cursor: pointer; &:hover { background: #F2F2F2; backdrop-filter: blur(10px); } img { width: 20px; } span { color: #000; font-family: "Inter Tight"; font-size: 16px; font-style: normal; font-weight: 500; line-height: 100%; /* 16px */ } svg { position: absolute; right: 20px; top: 50%; transform: translateY(-50%); } ` // const SvgIconSearch = styled("Switch.Root")` // position: absolute; // ` const { from, isDapps, markets, currentMarket, token, chains, categoryIndex, chainIndex, onSearchInput, onChangeCategoryIndex, onChangeChainIndex, onChangeMarket } = props const SearchIcon = ( <svg width="21" height="15" viewBox="0 0 21 15" fill="none" xmlns="http://www.w3.org/2000/svg"> <circle cx="7.01829" cy="7.01829" r="6.01829" stroke="#979ABE" strokeWidth="2" /> <rect x="14.9141" y="9.64941" width="6.141" height="2.63186" rx="1.31593" transform="rotate(30 14.9141 9.64941)" fill="#979ABE" /> </svg> ) const currentChain = chains[chainIndex] return ( <Wrapper className={[from, isDapps ? 'isDapps' : ''].join(' ')}> <StyledTipsAndPoolsContainer> { from === 'layer' && isDapps && ( <StyledTips> <StyledTipsFirstTxt>Liquidity</StyledTipsFirstTxt> <StyledTipsSecondTxt>Seamlessly adding LP to any pair.</StyledTipsSecondTxt> </StyledTips> ) } <Pools className={[from].join(' ')}> <Pool className={[from, categoryIndex === 0 ? 'active' : ''].join(' ')} onClick={() => onChangeCategoryIndex(0)}>All pools</Pool> <Pool className={[from, categoryIndex === 1 ? 'active' : ''].join(' ')} onClick={() => onChangeCategoryIndex(1)}>Your pools</Pool> </Pools> </StyledTipsAndPoolsContainer> <StyledSearchAndChainsContainer className={[from, isDapps ? 'isDapps' : ''].join(' ')}> <Search> <SvgIcon className="icon-search"> {SearchIcon} </SvgIcon> <Input placeholder="search by token" onInput={(event) => onSearchInput(event)} /> </Search> <ChainsOrMarketsWrapper className={[from, isDapps ? 'isDapps' : ''].join(' ')}> { isDapps ? ( <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> ) : ( from === 'layer' ? ( <StyledLayerChainsContainer> <StyledLayerCurrentChain> <img src={currentChain?.logo} alt={currentChain?.name} /> <span>{currentChain?.name}</span> <svg xmlns="http://www.w3.org/2000/svg" width="12" height="7" viewBox="0 0 12 7" fill="none"> <path d="M1 1L6 5L11 1" stroke="black" stroke-width="2" stroke-linecap="round" /> </svg> </StyledLayerCurrentChain> <StyledLayerChainsWrap> <StyledLayerChains> {chains && chains.map((chain, index) => { return <StyledLayerChain key={index} className={index === chainIndex ? 'active' : ''} onClick={() => onChangeChainIndex(index)}> <img src={chain.logo} alt={chain.name} /> <span>{chain?.name}</span> { currentChain.id === chain.id && ( <svg xmlns="http://www.w3.org/2000/svg" width="13" height="10" viewBox="0 0 13 10" fill="none"> <path d="M1 3.72727L5 8L12 1" stroke="black" stroke-width="2" /> </svg> ) } </StyledLayerChain> })} </StyledLayerChains> </StyledLayerChainsWrap> </StyledLayerChainsContainer> ) : ( <Chains> {chains && chains.map((chain, index) => { return <Chain key={index} className={index === chainIndex ? 'active' : ''} onClick={() => onChangeChainIndex(index)}> <img src={chain.logo} alt={chain.name} /> </Chain> })} </Chains> ) ) } </ChainsOrMarketsWrapper> </StyledSearchAndChainsContainer > </Wrapper > )