1 files changed, 45 insertions, 2 deletions
diff --git a/FrontEnd/src/views/common/tab/Tabs.tsx b/FrontEnd/src/views/common/tab/Tabs.tsx
index 29ebcbd8..701b4073 100644
--- a/FrontEnd/src/views/common/tab/Tabs.tsx
+++ b/FrontEnd/src/views/common/tab/Tabs.tsx
@@ -1,6 +1,11 @@
 import React from "react";
+import { Link } from "react-router-dom";
+import { useTranslation } from "react-i18next";
+import classnames from "classnames";
 
-import { I18nText } from "@/common";
+import { convertI18nText, I18nText } from "@/common";
+
+import "./Tabs.css";
 
 export interface Tab {
   name: string;
@@ -11,9 +16,47 @@ export interface Tab {
 
 export interface TabsProps {
   activeTabName?: string;
+  actions?: React.ReactNode;
+  dense?: boolean;
   tabs: Tab[];
+  className?: string;
+  style?: React.CSSProperties;
 }
 
 export default function Tabs(props: TabsProps): React.ReactElement | null {
-  return <div></div>;
+  const { tabs, activeTabName, className, style, dense, actions } = props;
+
+  const { t } = useTranslation();
+
+  return (
+    <div
+      className={classnames("cru-nav", dense && "dense", className)}
+      style={style}
+    >
+      {tabs.map((tab) => {
+        const active = activeTabName === tab.name;
+        const className = classnames("cru-nav-item", active && "active");
+
+        if (tab.link != null) {
+          return (
+            <Link
+              key={tab.name}
+              to={tab.link}
+              onClick={tab.onClick}
+              className={className}
+            >
+              {convertI18nText(tab.text, t)}
+            </Link>
+          );
+        } else {
+          return (
+            <span key={tab.name} onClick={tab.onClick} className={className}>
+              {convertI18nText(tab.text, t)}
+            </span>
+          );
+        }
+      })}
+      <div className="cru-nav-action-area">{actions}</div>
+    </div>
+  );
 }