From c3f17f1dd1099c244e36d09b14c3e131d703830e Mon Sep 17 00:00:00 2001
From: crupest <crupest@outlook.com>
Date: Sat, 26 Jun 2021 19:54:24 +0800
Subject: ...

---
 FrontEnd/src/views/admin/AdminNav.tsx | 50 +++++++++++++----------------------
 1 file changed, 18 insertions(+), 32 deletions(-)

(limited to 'FrontEnd/src/views/admin')

diff --git a/FrontEnd/src/views/admin/AdminNav.tsx b/FrontEnd/src/views/admin/AdminNav.tsx
index 47e2138f..8b4c5fda 100644
--- a/FrontEnd/src/views/admin/AdminNav.tsx
+++ b/FrontEnd/src/views/admin/AdminNav.tsx
@@ -1,43 +1,29 @@
 import React from "react";
-import { Nav } from "react-bootstrap";
-import { useTranslation } from "react-i18next";
-import { useHistory, useRouteMatch } from "react-router";
+import { useRouteMatch } from "react-router";
+
+import Tabs from "../common/tab/Tabs";
 
 const AdminNav: React.FC = () => {
   const match = useRouteMatch<{ name: string }>();
-  const history = useHistory();
-
-  const { t } = useTranslation();
 
   const name = match.params.name;
 
-  function toggle(newTab: string): void {
-    history.push(`/admin/${newTab}`);
-  }
-
   return (
-    <Nav variant="tabs" className="my-2">
-      <Nav.Item>
-        <Nav.Link
-          active={name === "users"}
-          onClick={() => {
-            toggle("users");
-          }}
-        >
-          {t("admin:nav.users")}
-        </Nav.Link>
-      </Nav.Item>
-      <Nav.Item>
-        <Nav.Link
-          active={name === "more"}
-          onClick={() => {
-            toggle("more");
-          }}
-        >
-          {t("admin:nav.more")}
-        </Nav.Link>
-      </Nav.Item>
-    </Nav>
+    <Tabs
+      activeTabName={name}
+      tabs={[
+        {
+          name: "users",
+          text: "admin:nav.users",
+          link: "/admin/users",
+        },
+        {
+          name: "more",
+          text: "admin:nav.more",
+          link: "/admin/more",
+        },
+      ]}
+    />
   );
 };
 
-- 
cgit v1.2.3