feat: translations

src/Element/Tabs.tsx

@@ -1,8 +1,10 @@
 import "./Tabs.css";
+import { ReactElement } from "react";
 
 export interface Tab {
-  text: string;
+  text: ReactElement | string;
   value: number;
+  disabled?: boolean;
 }
 
 interface TabsProps {
@@ -18,8 +20,10 @@ interface TabElementProps extends Omit<TabsProps, "tabs"> {
 export const TabElement = ({ t, tab, setTab }: TabElementProps) => {
   return (
     <div
-      className={`tab ${tab.value === t.value ? "active" : ""}`}
-      onClick={() => setTab(t)}
+      className={`tab ${tab.value === t.value ? "active" : ""} ${
+        t.disabled ? "disabled" : ""
+      }`}
+      onClick={() => !t.disabled && setTab(t)}
     >
       {t.text}
     </div>
@@ -29,17 +33,9 @@ export const TabElement = ({ t, tab, setTab }: TabElementProps) => {
 const Tabs = ({ tabs, tab, setTab }: TabsProps) => {
   return (
     <div className="tabs">
-      {tabs.map((t) => {
-        return (
-          <div
-            key={t.value}
-            className={`tab ${tab.value === t.value ? "active" : ""}`}
-            onClick={() => setTab(t)}
-          >
-            {t.text}
-          </div>
-        );
-      })}
+      {tabs.map((t) => (
+        <TabElement tab={tab} setTab={setTab} t={t} />
+      ))}
     </div>
   );
 };