{
"data": {
"mattb.near": {
"widget": {
"Frensly.Components.Toolbar": {
"": "const routeMap = [\n {\n name: \"Home\",\n to: \"home\",\n },\n {\n name: \"Explore\",\n to: \"explore\",\n },\n {\n name: \"NEAR Frens\",\n to: \"frens\",\n },\n];\n\nconst FRENSLY_LOGO =\n \"https://ipfs.near.social/ipfs/bafkreibmkg7wbgfnliss4ow7uy4tn2trd7qejpfjzblhf45p2ffw2ppryu\";\nconst LENS_MINI_LOGO =\n \"https://ipfs.near.social/ipfs/bafkreiggkmczb7v43nicdia4n7xqkgynopby5k3nxs3zj6fij5eeurh23i\";\n\nconst Toolbar = styled.div`\n display:flex;\n align-items:center;\n justify-content:space-between;\n padding:1.8rem 1.8rem 0;\n\n button {\n border-radius:30px;\n border:0;\n font-size:.8rem;\n font-weight:bold;\n color:#000;\n background-color:#f2f2f2;\n border:1px solid rgba(0,0,0,.05);\n padding:.5rem 1.2rem;\n transition:all .2s;\n\n img {\n max-width:20px;\n margin-right:5px;\n }\n\n :hover {\n box-shadow: 0 0 0 3px rgba(0,0,0,.05);\n border:1px solid rgba(0,0,0,.05);\n background-color:#f2f2f2;\n color:#000;\n }\n }\n`;\n\nconst Menu = styled.div`\n display:flex;\n align-items:center;\n`;\n\nconst Logo = styled.div`\n display:flex;\n align-items:flex-end;\n justify-content:flex-end;\n \n img {\n max-width:60px;\n }\n\n p {\n padding:0;\n margin:0;\n font-size:1.6rem;\n font-weight:bold;\n margin-left:10px;\n text-decoration:underline;\n }\n`;\n\nconst MenuOptions = styled.ul`\n display:flex;\n list-style:none;\n align-items:center;\n padding:0;\n margin:0;\n margin-left:20px;\n`;\n\nconst Option = styled.li`\n padding:5px 15px;\n border-radius:10px;\n background-color:rgba(0,0,0,.05);\n font-size:.8rem;\n\n :not(:last-of-type) {\n margin-right:15px;\n }\n`;\n\nreturn (State, store, { Route }) => {\n Route = Route || (() => <></>);\n\n return (\n <Toolbar>\n <Menu>\n <Logo>\n <img src={FRENSLY_LOGO} />\n </Logo>\n <Search type=\"text\" placeholder=\"Search frens\"></Search>\n <MenuOptions>\n {routeMap.map((route) => (\n <Option to={route.to}>{route.name}</Option>\n ))}\n </MenuOptions>\n </Menu>\n <button>\n <span>\n <img src={LENS_MINI_LOGO} />\n </span>\n Login\n </button>\n </Toolbar>\n );\n};\n",
"metadata": {
"platform": "jutsu.ai"
},
"branch": {
"draft": null
}
}
}
}
}
}