const darkColors = { page_bg: "rgb(25,33,50)", horizen_bg: "#fff", header_bg: "rgb(49,62,89)", sideBar: { sideBar_bg: "rgb(49,62,89)", sideBar_color: "#fff", }, footer: { titlenelowBackground: "#806ce1", titleBackground: "#fff", fromBackground: "rgb(55,72,107)", toBackground: "rgb(55,72,107)", belowBackground: "rgb(210, 202, 250)", }, dynamic_header: { afterbrandcolor: "", color1brand: "#fff", color2brand: "rgb(210, 202, 250)", colordescription: "rgb(210, 202, 250)", background: "radial-gradient(circle, rgb(49,62,89) 0%, rgba(230,230,231,0.01) 0%, rgb(49,62,89) 100%, rgb(49,62,89) 100%, rgb(49,62,89) 100%, rgba(46,52,90,1) 100%);", }, search_sbt: { section_bg: "transparent", card_bg: "transparent)", search_btn_bg: "rgb(49,62,89)", search_btn_bg_hover: "rgba(49,62,89,0.8)", search_btn_text: "rgb(255,255,255)", input_bg: "rgb(49,62,89)", input_bg_hover: "rgba(49,62,89,0.8)", input_text_color: "rgb(255,255,255)", input_border: "rgba(49,62,89,0.8)", table_bg: "transparent", table_color: "rgb(255,255,255)", table_border_color: "", table_accent_bg: "", table_striped_color: "rgb(255,255,255)", table_striped_bg: "", table_hover_color: "rgb(255,255,255)", table_hover_bg: "", }, sbt_info: { section_bg: "transparent", card_bg: "rgb(49, 62, 89)", card_title_color: "#806ce1", card_content_color: "#fff", }, tab_sbt: { backgroundColor: "rgb(49,62,89)", textColor: "#fff", headerColor: "#806ce1", numberColor: "#fff", }, sbt_area: { section_bg: "transparent", card_bg: "rgb(49, 62, 89)", card_title_color: "#806ce1", }, table_pagination: { table_bg: "rgb(49,62,89)", table_color: "rgb(255,255,255)", table_border_color: "", table_accent_bg: "", table_striped_color: "rgb(255,255,255)", table_striped_bg: "", table_hover_color: "rgb(255,255,255)", table_hover_bg: "", btn_border: "rgb(25,33,50)", btn_bg: "rgb(49,62,89)", btn_bg_active: "rgb(25,33,50)", btn_color: "#fff", input_bg: "#2f3b54", }, chart: { title: "rgb(255,255,255)", subtitle: "rgba(255,255,255,0.7)", xAxis: "rgb(255,255,255)", yAxis: "rgb(255,255,255)", legend: "rgba(255,255,255,0.7)", legendHover: "rgb(255,255,255)", rangeSelector: { labels: "rgba(255,255,255,0.7)", inputColor: "rgb(255,255,255)", btn_bg: "rgba(25,33,50,0.3)", btn_color: "rgba(255,255,255,0.7)", btn_hover_bg: "rgba(25,33,50,0.5)", btn_hover_color: "rgba(255,255,255,0.8)", btn_active_bg: "rgba(25,33,50,0.8)", btn_active_color: "rgb(255,255,255)", }, }, spinnerColors: ["#6F61C0", "#241468"], chartColor: [ "#F79BD3", "#A084E8", "#EA1179", "#F79BD3", "#A084E8", "#6F61C0", "#241468", "#9F0D7F", ], }; const lightColors = { page_bg: "rgb(241,242,245)", horizen_bg: "#391b86", header_bg: "rgb(210, 202, 250)", sideBar: { sideBar_bg: "rgb(210, 202, 250)", sideBar_color: "#fff", }, footer: { titlenelowBackground: "#806ce1", titleBackground: "#fff", fromBackground: "rgb(210, 202, 250)", toBackground: "rgb(210, 202, 250)", belowBackground: "#806ce1", }, dynamic_header: { afterbrandcolor: "#789efb", color1brand: "#000", color2brand: "#806ce1", colordescription: "#806ce1", background: "linear-gradient(62deg, #d2cafa 0%, #E0C3FC 100%);", }, search_sbt: { section_bg: "rgb(235, 231, 253)", card_bg: "", search_btn_bg: "rgb(210, 202, 250)", search_btn_bg_hover: "rgba(210, 202, 250,0.8)", search_btn_text: "rgb(0,0,0)", input_bg: "rgba(210, 202, 250,0.2)", input_bg_hover: "rgba(210, 202, 250,0.4)", input_text_color: "rgb(0,0,0)", input_border: "rgba(210, 202, 250,0.4)", table_bg: "transparent", table_color: "rgb(0,0,0)", table_border_color: "", table_accent_bg: "", table_striped_color: "rgb(0,0,0)", table_striped_bg: "", table_hover_color: "rgb(0,0,0)", table_hover_bg: "", }, sbt_info: { section_bg: "rgb(235, 231, 253)", card_bg: "rgb(255, 255, 255)", card_title_color: "#806ce1", card_content_color: "#000", }, tab_sbt: { backgroundColor: "rgb(210, 202, 250)", textColor: "#fff", headerColor: "#806ce1", numberColor: "#fff", }, sbt_area: { section_bg: "rgb(235, 231, 253)", card_bg: "rgb(255, 255, 255)", card_title_color: "#806ce1", }, table_pagination: { table_bg: "rgb(255,255,255)", table_color: "rgb(0,0,0)", table_border_color: "", table_accent_bg: "", table_striped_color: "rgb(0,0,0)", table_striped_bg: "", table_hover_color: "rgb(0,0,0)", table_hover_bg: "", btn_border: "#806ce1", btn_bg: "#fff", btn_bg_active: "rgb(235, 231, 253)", btn_color: "#000", }, chart: { title: "rgba(0,0,0,1)", subtitle: "rgba(0,0,0,0.7)", xAxis: "rgba(0,0,0,1)", yAxis: "rgba(0,0,0,1)", legend: "rgba(0,0,0,0.7)", legendHover: "rgba(0,0,0,1)", rangeSelector: { labels: "rgba(0,0,0,0.7)", inputColor: "rgba(0,0,0,0.5)", btn_bg: "rgba(0,0,0,0.3)", btn_color: "rgba(0,0,0,0.8)", btn_hover_bg: "rgba(0,0,0,0.4)", btn_hover_color: "rgba(0,0,0,1)", btn_active_bg: "rgb(235, 231, 253)", btn_active_color: "rgba(0,0,0,1)", }, }, spinnerColors: ["#6F61C0", "#241468"], chartColor: [ "#F79BD3", "#A084E8", "#EA1179", "#F79BD3", "#A084E8", "#6F61C0", "#241468", "#9F0D7F", ], }; const tabs = { area: "sbt-area", info: "sbt-info", growth: "sbt-growth", Explorer: "Explorer", }; State.init({ value: "acceleration", light: true, tab: "sbt-area", }); const themeColor = state.light ? lightColors : darkColors; const handelLight = () => { let bool = state.light; State.update({ light: !bool }); }; const setTab = (tab) => State.update({ tab }); const Container = styled.div` &&{text-align:center}; .tabContent{ display:inline-flex; align-items:center; background: rgba(26, 46, 51, 0.25); border: 1px solid rgba(255, 255, 255, 0.3); border-radius: 10px; padding:3px 4px; list-style-type:none; margin: 0 auto; } .tab-item .active{ background: #304352; } .tab-item button{ background-color:transparent; border-radius: 8px; font-weight: 500; font-size: 14px; color:#fff; height:30px; padding:0 22px; border:none; } `; return ( <div style={{ background: themeColor?.page_bg, }} > <div> <div style={{ backgroundColor: themeColor?.header_bg, borderRadius: "15px", display: "flex", justifyContent: "space-between", padding: ".5rem", marginBottom: "1rem", }} > <Widget src="efiz.near/widget/marquee" props={{ text: "Broaden your horizon with Flipside", fontFamily: "Arial", fontSize: "20px", backgroundColor: themeColor?.header_bg, height: "60px", width: "100%", textColor: themeColor?.horizen_bg, }} /> <img onClick={handelLight} Width={30} src="https://raw.githubusercontent.com/lordking1234/blockchain-icon/main/lightmode.svg" /> </div> <div style={{ background: themeColor.page_bg, zIndex: 1, }} className="sticky-top p-4" > <div> <Container> <ul className="tabContent"> <li className="tab-item"> <button className={`${state.tab === tabs.area ? "active" : ""}`} aria-current="page" onClick={() => setTab(tabs.area)} > Explorer </button> </li> <li className="tab-item"> <button className={`${state.tab === tabs.growth ? "active" : ""}`} aria-current="page" onClick={() => setTab(tabs.growth)} > Developer's Growth </button> </li> <li className="tab-item"> <button className={`${state.tab === tabs.info ? "active" : ""}`} aria-current="page" onClick={() => setTab(tabs.info)} > Developer's Eco </button> </li> </ul> </Container> </div> </div> <div> <div className="content"> {state.tab === "sbt-area" && ( <Widget src="lord1.near/widget/component" props={{ themeColor: themeColor }} /> )} {state.tab === "sbt-growth" && ( <Widget src="lord1.near/widget/component-growth" props={{ themeColor: themeColor }} /> )} {state.tab === "sbt-info" && ( <Widget src="lord1.near/widget/component-area" props={{ themeColor: themeColor }} /> )} </div> </div> <Widget src="lord1.near/widget/footer" props={{ beBackground: "#fff", titlenelowBackground: themeColor?.footer?.titlenelowBackground, titleBackground: themeColor?.footer?.titleBackground, svgBackground: "#806ce1", fromBackground: themeColor?.footer?.fromBackground, toBackground: themeColor?.footer?.toBackground, belowBackground: themeColor?.footer?.belowBackground, }} /> </div> </div> );