const Container = styled.div` display: inline-flex; align-items: center; background: #0d1c1f; border-radius: 10px; padding: 4px; width: 100%; .default { display: flex; justify-content: center; align-items: center; border-radius: 6px; font-weight: 500; font-size: 14px; color: #fff; height: 28px; padding: 0 25px; cursor: pointer; flex-grow: 1; } .active { background: #0092ff; } a { :hover { text-decoration: none; } } `; const { buttonStatus } = state; const current_mode = Storage.get( "ref-mode", "ref-admin.near/widget/user-builder" ); function switchButton(type) { Storage.set("ref-mode", type); State.update({ buttonStatus: type, }); } const targetStatus = buttonStatus || current_mode; return ( <Container> <a disable={targetStatus != "builder"} class={`default ${targetStatus !== "builder" ? "active" : ""}`} onClick={(e) => { switchButton("user"); return false; }} > User </a> <a disable={true} class={`default ${targetStatus == "builder" ? "active" : ""}`} onClick={(e) => { switchButton("builder"); }} > Builder </a> </Container> );