const Container = styled.div` .back{ display:flex; align-items:center; img{ margin-right:14px; cursor:pointer; } span{ color:#979ABE; font-size:18px; font-weight:500; cursor:pointer; } } .title{ display:flex; align-items:center; padding-left:0px; margin-top:20px; img{ width:28px; margin-right:10px; } span{ font-size:40px; color:#fff; font-weight:700; } } .search-area{ display:flex; justify-content:space-between; align-items:flex-end; transform:translateY(-10px); .description{ font-size:20px; color:#979ABE; font-weight:500; } .search{ display:flex; align-items:center; jusitfy-content:space-between; border-bottom:1px solid #373A53; input{ font-size:20px; font-weight:500; color:#fff; outline: none; background: none; border:none; &:focus{ box-shadow:none; } } } } .noData{ display: flex; justify-content: center; font-size:18px; color:#4F5375; font-weight:500; margin-top:100px; } ` const List = styled.div` display:flex; flex-wrap:wrap; gap:30px 20px; margin-top:36px; ` const ListItem = styled.a` &:hover{ text-decoration:none; } width:250px; .body{ display:flex; flex-direction:column; justify-content:center; align-items:center; height:108px; border-radius:20px; background-color:#373A53; padding:12px 20px; .item-title{ font-size:16px; color:#fff; font-weight:700; flex-wrap:wrap; text-align:center; .num{ font-size:14px; color:#979ABE; margin:0 3px; } } .platform{ margin-top:8px; img{ width:26px; height:26px; margin-right:5px; } span{ font-size:14px; color:#979ABE; } } } .foot{ display:flex; align-items:center; justify-content:space-between; font-size:14px; color:#979ABE; margin-top:12px; padding:0 12px; } ` State.init({ hotActionList: [], searchActionList: [], }); function get_hot_action_list() { asyncFetch("http://139.162.85.48:8100/get-hot-action?hot_number=20").then((res) => { const result = JSON.parse(res.body || {}).data || []; State.update({ hotActionList: result, searchActionList: result, }) }); } if (state.hotActionList.length == 0) { get_hot_action_list(); } function searchBykeyWords(e) { const value = e.target.value.toLowerCase(); const search_result = state.hotActionList.filter((action) => { const { action_title } = action; return action_title.toLowerCase().includes(value); }) State.update({ searchActionList: search_result }) } function get_item_title(action) { const { action_title } = action; const arr = action_title.split(' '); console.log('arr', arr, Number(arr[1])); if (Number(arr[1])) { return <>{arr[0]} <label className="num">{arr[1]}</label> {arr.slice(2).join(' ')} </> } else { return action_title } } function get_link(action) { // todo const { action_title } = action; return '' } const template_icons = { // todo // 'ZkEvm': 'https://ipfs.near.social/ipfs/bafkreibxzspxqtrp3gyenwn5a6sl2wmsxih67pzdufrqwj26mpf2nkhtei', // 'ZkEvm-bridge': 'https://ipfs.near.social/ipfs/bafkreifdrbibd2mk3do5wgarolvwucggfcamupx53peza4qpuaudcdtcvi', // 'Ethereum': 'https://ipfs.near.social/ipfs/bafkreidpubx6ajqxe2vuc4o4tvreplv4hjmydzwxtzi3tinnd7vfrj3xuy', 'ZkEvm': 'https://ipfs.near.social/ipfs/bafkreiftqxncp4pt36z5mcfzizbkccoufksmz2f4zhnproxv4krfb5qmsm', 'ZkEvm-bridge': 'https://ipfs.near.social/ipfs/bafkreicvtmhen64rruzzkqt7y4prlyt4hbdgbfuzgocss2b55gbewfsery', 'Ethereum': 'https://ipfs.near.social/ipfs/bafkreiftqxncp4pt36z5mcfzizbkccoufksmz2f4zhnproxv4krfb5qmsm' } return <Container> <div className="back"> <img src="https://ipfs.near.social/ipfs/bafkreig7ezlwthp2u6gsoifpvbsjcepuyvtx33uyjaentqwvcoh64unvd4"></img> <span>Back</span> </div> <div className="title"> <img src="https://ipfs.near.social/ipfs/bafkreiaerml7c2sfbojxg64lms25qappcgoevsrfmquxagfbowhm45gyey"></img> <span>Quest Trends</span> </div> <div className="search-area"> <div className="description">Top 20 quest by users</div> <div className="search"> <input onChange={searchBykeyWords}></input> <img src="https://ipfs.near.social/ipfs/bafkreia4oaaolx3jppkacw3rqxqtn66imuleqghejdq5xopmxjhtxflibm"></img> </div> </div> <List> { state.searchActionList.map((action) => { return <ListItem href={get_link(action)}> <div className="body"> <div className="item-title"> {get_item_title(action)} </div> <div className="platform"> <img src={template_icons[action.template]}></img> <span>{action.template}</span> </div> </div> <div className="foot"> <span>Total Execution</span> <span>{action.count_number}</span> </div> </ListItem> }) } </List> { state.searchActionList.length == 0 ? <p className="noData">No result found</p>:null } </Container>