"": "const Container = styled.div`\\n display:flex;\\n flex-direction:column;\\n align-items:center;\\n height:100vh;\\n background-image: linear-gradient(to right top, #cad5fe, #ced9fe, #d3ddff, #d7e0ff, #dce4ff);\\n`;\\n\\nconst Row = styled.div`\\n display:flex;\\n flex-direction: column;\\n width:100%;\\n overflow: auto;\\n`;\\n\\nconst Header = styled.div`\\n display:flex;\\n width:100%;\\n justify-content:space-between;\\n font-size: 0.875rem; \\n line-height: 1.25rem; \\n padding: 15px 20px;\\n background: #acbafc;\\n .logo{\\n display:flex;\\n color: #3730a3;\\n font-size:20px;\\n font-weight:700;\\n text-decoration:none;\\n }\\n .info{\\n margin-left: 10px;\\n display:flex;\\n gap:10px;\\n align-items:center;\\n }\\n .icon{\\n display:flex;\\n align-items:center;\\n justify-content:center;\\n border-radius: 50%;\\n background: #9aa8fb;\\n padding: 2px;\\n }\\n`;\\n\\nconst Content = styled.div`\\n display:flex;\\n justify-content:center;\\n flex-direction:column;\\n \\n`;\\n\\nconst SearchBar = styled.div`\\n position:relative;\\n width:80%;\\n display:flex;\\n margin: 3rem auto;\\n flex-direction:column;\\n @media screen and (max-width:768px){\\n width:100%;\\n padding:0 10px;\\n }\\n\\n .title{\\n color:#807eca;\\n margin-bottom:5px;\\n }\\n input{\\n &::placeholder{\\n color:#9b97d1;\\n }\\n }\\n .search{\\n width:100%;\\n border-radius:15px;\\n border: 2px solid #c7d2fe;\\n padding: 10px 20px;\\n outline:none;\\n :focus{\\n border: 2px solid #3730a3;\\n }\\n :hover{\\n border: 2px solid #3730a3;\\n }\\n &::placeholder{\\n color:#9b97d1;\\n }\\n @media screen and (max-width:768px){\\n padding: 15px 20px;\\n }\\n }\\n .arrow{\\n position:absolute;\\n right:10px;\\n top: 50%;\\n cursor:default;\\n outline:none;\\n border:2px solid #a5b4fc;\\n background: none;\\n border-radius:50px;\\n @media screen and (max-width:768px){\\n top:52%;\\n right:20px;\\n }\\n }\\n .button-arrow{\\n border-radius: 100%;\\n outline:none;\\n border:none;\\n background:#5d76cb;\\n }\\n`;\\n\\nconst View = styled.div`\\n padding: 0 10px;\\n`;\\n\\nconst ListResult = styled.div`\\n display:flex;\\n flex-direction:column;\\n border: 2px solid #c7d2fe;\\n border-radius:15px;\\n color:#7c7bc8;\\n background:#eef2ff;\\n max-width:80%;\\n margin: 0 auto;\\n min-height:500px;\\n max-height:100%;\\n @media screen and (max-width:768px){\\n max-width:100%;\\n }\\n .header{\\n margin-top:10px;\\n margin-left:15px;\\n font-size:16px;\\n font-weight:600;\\n }\\n .listItem{\\n display:flex;\\n flex-direction:column;\\n gap:20px;\\n margin-top:10px;\\n padding:0 10px;\\n @media screen and (max-width:768px){\\n padding:0 5px;\\n }\\n }\\n .item{\\n display:flex;\\n flex-direction:row;\\n justify-content:space-between;\\n align-items:center;\\n gap:10px;\\n width:100%;\\n border: 1px solid #a5b4fc;\\n min-height:20px;\\n border-radius:15px;\\n padding:10px 20px;\\n\\n }\\n .image{\\n border-radius:50px;\\n border: 2px solid #c7d2fe;\\n width:50px;\\n height:50px;\\n }\\n .project{\\n display:flex;\\n flex-direction:column;\\n gap:2px;\\n }\\n .title{\\n color:#7c7bc8;\\n font-size:15px;\\n font-weight:500;\\n @media screen and (max-width:768px){\\n font-size:12px;\\n }\\n }\\n .decs{\\n font-size:11px;\\n @media screen and (max-width:768px){\\n font-size:10px;\\n }\\n }\\n`;\\nconst [value, setValue] = useState(props.search || \\\"public good\\\");\\nconst requestOptions = {\\n method: \\\"POST\\\",\\n body: JSON.stringify({ messages: value }),\\n header: {\\n \\\"Content-Type\\\": \\\"application/json\\\",\\n },\\n};\\nconst res = fetch(\\n \\\"https://chat-ai.dropwallet.io/api/chat-potlock\\\",\\n requestOptions\\n);\\nconsole.log(\\\"Res\\\", res);\\nconst [projectsId, setProjectsId] = useState(res.body || []);\\nconst [name, setName] = useState(\\\"\\\");\\nconst [image, setImage] = useState(\\\"\\\");\\nconst [description, setDescription] = useState(\\\"\\\");\\nconst hanleInput = (e) => {\\n const value = e.target.value;\\n setValue(value);\\n};\\n\\nres.body &&\\n res.body.map((projectId) => {\\n // console.log(projectId);\\n if (projectId != undefined) {\\n const data = Social.getr(`huunhan.testnet/profile`);\\n if (data) {\\n setName(data.name);\\n setImage(data.image);\\n setDescription(data.description);\\n }\\n }\\n });\\n//console.log(data);\\nreturn (\\n <Container>\\n <Row>\\n <Content>\\n <SearchBar>\\n <div class=\\\"title\\\">Results for</div>\\n <div>\\n <input\\n value={value}\\n onChange={hanleInput}\\n class=\\\"search\\\"\\n type=\\\"text\\\"\\n />\\n <button class=\\\"arrow\\\" type=\\\"submit\\\">\\n <svg\\n xmlns=\\\"http://www.w3.org/2000/svg\\\"\\n width=\\\"20\\\"\\n height=\\\"20\\\"\\n fill=\\\"#5950e6\\\"\\n viewBox=\\\"0 0 256 256\\\"\\n >\\n <path d=\\\"M244,56v48a12,12,0,0,1-12,12H184a12,12,0,1,1,0-24H201.1l-19-17.38c-.13-.12-.26-.24-.38-.37A76,76,0,1,0,127,204h1a75.53,75.53,0,0,0,52.15-20.72,12,12,0,0,1,16.49,17.45A99.45,99.45,0,0,1,128,228h-1.37A100,100,0,1,1,198.51,57.06L220,76.72V56a12,12,0,0,1,24,0Z\\\"></path>\\n </svg>\\n </button>\\n </div>\\n </SearchBar>\\n <View>\\n <ListResult>\\n <div class=\\\"header\\\">ALL PROJECT</div>\\n <div class=\\\"listItem\\\">\\n <div class=\\\"item\\\">\\n <img class=\\\"image\\\" src={image} alt=\\\"profile\\\" />\\n <div class=\\\"project\\\">\\n <div class=\\\"title\\\">{name}</div>\\n <div class=\\\"decs\\\">{description.split(/\\\"/)}</div>\\n </div>\\n </div>\\n </div>\\n </ListResult>\\n </View>\\n </Content>\\n </Row>\\n </Container>\\n);\\n",