Transaction: Gczkxfw...nria

{ "data": { "freeui.testnet": { "widget": { "Index": { "": "State.init({\n selectedTab: props.tab || \"buttons\",\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`;\n\nconst Tabs = styled.div`\n display: flex;\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: #f8f9fa;\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: ${(p) => (p.selected ? \"black\" : \"white\")};\n background: none !important;\n border: none !important;\n outline: none;\n text-align: left;\n text-decoration: none !important;\n\n &:hover {\n color: #11181c;\n cursor: pointer;\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: orange;\n background: \n radial-gradient(rgba(63,94,251,1), rgba(63,94,251,1) 40%, rgba(63,94,251,1) 40%, rgba(252,70,107,1) 60%, rgba(252,70,107,1)100%), \n linear-gradient(to right, rgb(255, 217, 0), rgb(255, 217, 0), rgb(255, 217, 0) 10%, rgb(230, 54, 97), rgb(157, 0, 253), rgb(230, 54, 97), rgb(255, 217, 0) 90%, rgb(255, 217, 0), rgb(255, 217, 0));\n background-color: rgba(255, 255, 255, 0.5);\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 <Widget src=\"freeui.testnet/widget/LeonardoHeader\" />\n </>\n <div class=\"row\">\n <div class=\"col-md-3\">\n <Wrapper>\n <Tabs>\n <TabsButton\n onClick={() => handleTabClick(\"buttons\")}\n selected={state.selectedTab === \"buttons\"}\n >\n <Title>Buttons</Title>\n </TabsButton>\n\n <TabsButton\n onClick={() => handleTabClick(\"checkboxes\")}\n selected={state.selectedTab === \"checkboxes\"}\n >\n <Title>Checkboxes</Title>\n </TabsButton>\n\n <TabsButton\n onClick={() => handleTabClick(\"toggleswitches\")}\n selected={state.selectedTab === \"toggleswitches\"}\n >\n <Title>Toggle Switches</Title>\n </TabsButton>\n <TabsButton\n onClick={() => handleTabClick(\"cards\")}\n selected={state.selectedTab === \"cards\"}\n >\n <Title>Cards</Title>\n </TabsButton>\n <TabsButton\n onClick={() => handleTabClick(\"loaders\")}\n selected={state.selectedTab === \"loaders\"}\n >\n <Title>Loaders</Title>\n </TabsButton>\n <TabsButton\n onClick={() => handleTabClick(\"inputs\")}\n selected={state.selectedTab === \"inputs\"}\n >\n <Title>Inputs</Title>\n </TabsButton>\n <TabsButton\n onClick={() => handleTabClick(\"radiobuttons\")}\n selected={state.selectedTab === \"radiobuttons\"}\n >\n <Title>Radio Buttons</Title>\n </TabsButton>\n <TabsButton\n onClick={() => handleTabClick(\"forms\")}\n selected={state.selectedTab === \"forms\"}\n >\n <Title>Forms</Title>\n </TabsButton>\n <TabsButton\n onClick={() => handleTabClick(\"charts\")}\n selected={state.selectedTab === \"charts\"}\n >\n <Title>Charts</Title>\n </TabsButton>\n <TabsButton\n onClick={() => handleTabClick(\"patterns\")}\n selected={state.selectedTab === \"patterns\"}\n >\n <Title>Patterns</Title>\n </TabsButton>\n <TabsButton\n onClick={() => handleTabClick(\"myfavorites\")}\n selected={state.selectedTab === \"myfavorites\"}\n >\n <Title>My Favorites</Title>\n </TabsButton>\n </Tabs>\n </Wrapper>\n </div>\n <div class=\"col-md-9\">\n {state.selectedTab === \"buttons\" && (\n <>\n <Widget src=\"freeui.testnet/widget/Page.ButtonPage1\" />\n <br />\n <br />\n </>\n )}\n {state.selectedTab === \"checkboxes\" && (\n <>\n <Widget src=\"freeui.testnet/widget/Page.CheckBoxPage1\" />\n <br />\n <br />\n </>\n )}\n {state.selectedTab === \"toggleswitches\" && (\n <>\n {\" \"}\n <Widget src=\"freeui.testnet/widget/Page.ToggleSwitchPage1\" />\n <br />\n <br />\n </>\n )}\n {state.selectedTab === \"cards\" && (\n <>\n {\" \"}\n <Widget src=\"freeui.testnet/widget/Page.CardPage1\" />\n <br />\n <br />\n </>\n )}\n {state.selectedTab === \"loaders\" && (\n <>\n {\" \"}\n <Widget src=\"freeui.testnet/widget/Page.LoaderPage1\" />\n <br />\n <br />\n </>\n )}{\" \"}\n {state.selectedTab === \"inputs\" && (\n <>\n {\" \"}\n <Widget src=\"freeui.testnet/widget/Page.InputPage1\" />\n <br />\n <br />\n </>\n )}{\" \"}\n {state.selectedTab === \"radiobuttons\" && (\n <>\n {\" \"}\n <Widget src=\"freeui.testnet/widget/Page.RadioButtonPage1\" />\n <br />\n <br />\n </>\n )}\n {\"\"}\n {state.selectedTab === \"forms\" && (\n <>\n {\" \"}\n <Widget src=\"freeui.testnet/widget/Page.FormPage1\" />\n <br />\n <br />\n </>\n )}\n {\"\"}\n {state.selectedTab === \"charts\" && (\n <>\n {\" \"}\n <Widget src=\"freeui.testnet/widget/Page.ChartPage1\" />\n <br />\n <br />\n </>\n )}\n {\"\"}\n {state.selectedTab === \"patterns\" && (\n <>\n {\" \"}\n <Widget src=\"freeui.testnet/widget/Page.Pattern1\" />\n <br />\n <br />\n </>\n )}\n {state.selectedTab === \"myfavorites\" && (\n <>\n {\" \"}\n <Widget src=\"freeui.testnet/widget/Page.MyFavouritesPage\" />\n <br />\n <br />\n </>\n )}\n </div>\n </div>\n </div>\n);\n" } } } } }