- <div>
- <HtmlTags
- title={this.documentTitle}
- path={this.context.router.route.match.url}
- />
- <ul className="nav nav-tabs mb-2">
- <li className="nav-item">
- <button
- className={`nav-link btn ${
- this.state.currentTab == "site" && "active"
- }`}
- onClick={linkEvent(
- { ctx: this, tab: "site" },
- this.handleSwitchTab
- )}
- >
- {i18n.t("site")}
- </button>
- </li>
- <li className="nav-item">
- <button
- className={`nav-link btn ${
- this.state.currentTab == "taglines" && "active"
- }`}
- onClick={linkEvent(
- { ctx: this, tab: "taglines" },
- this.handleSwitchTab
- )}
- >
- {i18n.t("taglines")}
- </button>
- </li>
- <li className="nav-item">
- <button
- className={`nav-link btn ${
- this.state.currentTab == "emojis" && "active"
- }`}
- onClick={linkEvent(
- { ctx: this, tab: "emojis" },
- this.handleSwitchTab
- )}
- >
- {i18n.t("emojis")}
- </button>
- </li>
- </ul>
- {this.state.currentTab == "site" && (
- <div className="row">
- <div className="col-12 col-md-6">
- <SiteForm
- siteRes={this.state.siteRes}
- instancesRes={this.state.instancesRes}
- showLocal={showLocal(this.isoData)}
- />
- </div>
- <div className="col-12 col-md-6">
- {this.admins()}
- {this.bannedUsers()}
- </div>
- </div>
- )}
- {this.state.currentTab == "taglines" && (
- <div className="row">
- <TaglineForm siteRes={this.state.siteRes}></TaglineForm>
- </div>
- )}
- {this.state.currentTab == "emojis" && (
- <div className="row">
- <EmojiForm></EmojiForm>
- </div>
- )}
- </div>
+ <Tabs
+ tabs={[
+ {
+ key: "site",
+ label: i18n.t("site"),
+ getNode: () => (
+ <div className="row">
+ <div className="col-12 col-md-6">
+ <SiteForm
+ siteRes={this.state.siteRes}
+ instancesRes={this.state.instancesRes}
+ showLocal={showLocal(this.isoData)}
+ />
+ </div>
+ <div className="col-12 col-md-6">
+ {this.admins()}
+ {this.bannedUsers()}
+ </div>
+ </div>
+ ),
+ },
+ {
+ key: "taglines",
+ label: i18n.t("taglines"),
+ getNode: () => (
+ <div className="row">
+ <TaglineForm siteRes={this.state.siteRes} />
+ </div>
+ ),
+ },
+ {
+ key: "emojis",
+ label: i18n.t("emojis"),
+ getNode: () => (
+ <div className="row">
+ <EmojiForm />
+ </div>
+ ),
+ },
+ ]}
+ />