...

1 files changed, 23 insertions, 10 deletions

diff --git a/FrontEnd/src/views/common/tab/TabPages.tsx b/FrontEnd/src/views/common/tab/TabPages.tsx
index b7a9fb36..677f558a 100644
--- a/FrontEnd/src/views/common/tab/TabPages.tsx
+++ b/FrontEnd/src/views/common/tab/TabPages.tsx
@@ -1,17 +1,19 @@
 import React from "react";
-import { useTranslation } from "react-i18next";
 
-import { convertI18nText, I18nText, UiLogicError } from "@/common";
+import { I18nText, UiLogicError } from "@/common";
+
+import Tabs from "./Tabs";
 
 export interface TabPage {
-  id: string;
-  tabText: I18nText;
+  name: string;
+  text: I18nText;
   page: React.ReactNode;
 }
 
 export interface TabPagesProps {
   pages: TabPage[];
   actions?: React.ReactNode;
+  dense?: boolean;
   className?: string;
   style?: React.CSSProperties;
   navClassName?: string;
@@ -23,6 +25,7 @@ export interface TabPagesProps {
 const TabPages: React.FC<TabPagesProps> = ({
   pages,
   actions,
+  dense,
   className,
   style,
   navClassName,
@@ -30,17 +33,13 @@ const TabPages: React.FC<TabPagesProps> = ({
   pageContainerClassName,
   pageContainerStyle,
 }) => {
-  // TODO:
-
   if (pages.length === 0) {
     throw new UiLogicError("Page list can't be empty.");
   }
 
-  const { t } = useTranslation();
-
-  const [tab, setTab] = React.useState<string>(pages[0].id);
+  const [tab, setTab] = React.useState<string>(pages[0].name);
 
-  const currentPage = pages.find((p) => p.id === tab);
+  const currentPage = pages.find((p) => p.name === tab);
 
   if (currentPage == null) {
     throw new UiLogicError("Current tab value is bad.");
@@ -48,6 +47,20 @@ const TabPages: React.FC<TabPagesProps> = ({
 
   return (
     <div className={className} style={style}>
+      <Tabs
+        tabs={pages.map((page) => ({
+          name: page.name,
+          text: page.text,
+          onClick: () => {
+            setTab(page.name);
+          },
+        }))}
+        dense={dense}
+        activeTabName={tab}
+        className={navClassName}
+        style={navStyle}
+        actions={actions}
+      />
       <div className={pageContainerClassName} style={pageContainerStyle}>
         {currentPage.page}
       </div>