Transaction: 9M9kmvY...t55J

{ "data": { "marketplacebos.near": { "widget": { "TrendingPost.Index": { "": "const props = {\n dataP: [\n 1, 2, 3, 4, 5, 6, 7, 8, 9, 1, 11, 13, 12, 3, 1, 2, 32, 1, 32, 213, 21, 3,\n 123, 21, 3, 123, 12, 12,\n ],\n backgroundcolorP: [\n \"blue\",\n \"blue\",\n \"blue\",\n \"blue\",\n \"blue\",\n \"blue\",\n \"blue\",\n \"blue\",\n \"blue\",\n \"blue\",\n \"blue\",\n \"blue\",\n \"blue\",\n \"blue\",\n \"blue\",\n \"blue\",\n \"blue\",\n \"blue\",\n \"blue\",\n \"blue\",\n \"blue\",\n \"blue\",\n \"blue\",\n \"blue\",\n \"blue\",\n \"blue\",\n \"blue\",\n \"blue\",\n \"blue\",\n \"blue\",\n \"blue\",\n \"blue\",\n \"blue\",\n \"blue\",\n \"blue\",\n \"blue\",\n \"blue\",\n \"blue\",\n \"blue\",\n \"blue\",\n \"blue\",\n \"blue\",\n ],\n borderColorP: [\n \"blue\",\n \"blue\",\n \"blue\",\n \"blue\",\n \"blue\",\n \"blue\",\n \"blue\",\n \"blue\",\n \"blue\",\n \"blue\",\n \"blue\",\n \"blue\",\n \"blue\",\n \"blue\",\n \"blue\",\n \"blue\",\n \"blue\",\n \"blue\",\n \"blue\",\n \"blue\",\n \"blue\",\n \"blue\",\n \"blue\",\n \"blue\",\n \"blue\",\n \"blue\",\n \"blue\",\n \"blue\",\n \"blue\",\n \"blue\",\n \"blue\",\n \"blue\",\n \"blue\",\n \"blue\",\n \"blue\",\n \"blue\",\n \"blue\",\n \"blue\",\n \"blue\",\n \"blue\",\n \"blue\",\n \"blue\",\n ],\n labelP: [\n \"blue\",\n \"blue\",\n \"blue\",\n \"blue\",\n \"blue\",\n \"blue\",\n \"blue\",\n \"blue\",\n \"blue\",\n \"blue\",\n \"blue\",\n \"blue\",\n \"blue\",\n \"blue\",\n \"blue\",\n \"blue\",\n \"blue\",\n \"blue\",\n \"blue\",\n \"blue\",\n \"blue\",\n \"blue\",\n \"blue\",\n \"blue\",\n \"blue\",\n \"blue\",\n \"blue\",\n \"blue\",\n \"blue\",\n \"blue\",\n \"blue\",\n \"blue\",\n \"blue\",\n \"blue\",\n \"blue\",\n \"blue\",\n \"blue\",\n \"blue\",\n \"blue\",\n \"blue\",\n \"blue\",\n \"blue\",\n ],\n};\n\nState.init({\n selectedTab: props.tab || \"trendings\",\n});\n\nconst Wrapper = styled.div`\n padding-bottom: 48px;\n`;\n\nconst Title = styled.p`\n font-weight: 600;\n font-size: ${(p) => p.size || \"25px\"};\n line-height: 1.2em;\n color: #11181c;\n margin: ${(p) => (p.margin ? \"0 0 24px\" : \"0\")};\n overflow-wrap: anywhere;\n &:hover{\n color:white;\n }\n`;\n\nconst Div = styled.div`\n background: #365fa0ff\n`;\n\nconst Tabs = styled.div`\n display: flex;\n background: white;\n flex-direction: column;\n height: auto;\n border-right: 1px solid #eceef0;\n padding-right: 24px;\n overflow-y: auto;\n max-height: 700px;\n position: sticky;\n top: 0; \n @media (max-width: 1200px) {\n background: white;\n border: none;\n margin: 0;\n padding: 0;\n\n > * {\n flex: none;\n margin-bottom: 12px;\n }\n }\n`;\n\nconst TabsButton = styled.button`\n display: inline-flex;\n align-items: center;\n justify-content: flex-start;\n font-weight: 600;\n font-size: 23px;\n padding: 12px 0;\n position: relative;\n color: white;\n background: none;\n border: none !important;\n outline: none;\n text-align: center;\n text-decoration: none !important;\n\n &:hover {\n color:white;\n background: #303030;\n cursor: pointer;\n\n }\n\n &::after {\n content: \"\";\n display: ${(p) => (p.selected ? \"block\" : \"none\")};\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n width: 6px;\n background: black;\n background-size: 200% 100%, 200% 100%;\n background-position: 100% 0, 100% 0;\n\n animation: moveLines 3s linear infinite;\n\n @keyframes moveLines {\n 0% {\n background-position: 200% 0, 200% 0;\n }\n 100% {\n background-position: -200% 0, -200% 0;\n }\n }\n}\n`;\nconst handleTabClick = (tab) => {\n State.update({\n selectedTab: tab,\n });\n};\nreturn (\n <div class=\"container\">\n <></>\n <div class=\"row\">\n <div class=\"col-md-3\">\n <Wrapper>\n <Tabs>\n <TabsButton\n onClick={() => handleTabClick(\"trendings\")}\n selected={state.selectedTab === \"trendings\"}\n >\n <Title>\n <i class=\"bi bi-trophy\"></i> Trending\n </Title>\n </TabsButton>\n\n <TabsButton\n onClick={() => handleTabClick(\"charts\")}\n selected={state.selectedTab === \"charts\"}\n >\n <Title>\n <i class=\"bi bi-bar-chart\"></i> Charts Data\n </Title>\n </TabsButton>\n </Tabs>\n </Wrapper>\n </div>\n <div class=\"col-md-9\">\n {state.selectedTab === \"trendings\" && (\n <>\n <Widget\n src=\"marketplacebos.near/widget/TrendingPost.TableValue\"\n props={props}\n />\n <br />\n <br />\n </>\n )}\n\n {state.selectedTab === \"charts\" && (\n <>\n <div>\n <Widget\n src=\"marketplacebos.near/widget/TrendingPost.TableTags\"\n props={props}\n />\n </div>\n <br />\n </>\n )}\n </div>\n </div>\n </div>\n);\n" } } } } }