Added translation to Tabs

Implemented the change to SpaceSettings as an example.

public/locales/en/translation.json

@@ -30,5 +30,12 @@
         "uncategorize_subspaces": "Uncategorize subspaces",
         "pin_sidebar": "Pin to sidebar",
         "unpin_sidebar": "Unpin from sidebar"
+    },
+    "settings":{
+        "tabs": {
+            "general": "General",
+            "members": "Members",
+            "permission": "Permissions"
+        }
     }
 }

public/locales/jp/translation.json

@@ -5,5 +5,12 @@
     },
     "welcome":{
         "heading": "いらっしゃいませ"
+    },
+    "settings":{
+        "tabs": {
+            "general": "一般",
+            "members": "ユーザー",
+            "permission": "許可"
+        }
     }
 }

src/app/atoms/tabs/Tabs.jsx

@@ -5,6 +5,9 @@ import './Tabs.scss';
 import Button from '../button/Button';
 import ScrollView from '../scroll/ScrollView';
 
+import '../../i18n.jsx'
+import { useTranslation } from 'react-i18next';
+
 function TabItem({
   selected, iconSrc,
   onClick, children, disabled,
@@ -41,6 +44,8 @@ TabItem.propTypes = {
 function Tabs({ items, defaultSelected, onSelect }) {
   const [selectedItem, setSelectedItem] = useState(items[defaultSelected]);
 
+  const { t } = useTranslation();
+
   const handleTabSelection = (item, index) => {
     if (selectedItem === item) return;
     setSelectedItem(item);
@@ -59,7 +64,7 @@ function Tabs({ items, defaultSelected, onSelect }) {
               disabled={item.disabled}
               onClick={() => handleTabSelection(item, index)}
             >
-              {item.text}
+              {(item.translate != undefined && item.translate) ? t(item.text) : item.text}
             </TabItem>
           ))}
         </div>

src/app/organisms/space-settings/SpaceSettings.jsx

@@ -44,23 +44,26 @@ import '../../i18n.jsx'
 import { useTranslation } from 'react-i18next';
 
 const tabText = {
-  GENERAL: 'General',
-  MEMBERS: 'Members',
-  PERMISSIONS: 'Permissions',
+  GENERAL: 'settings.tabs.general',
+  MEMBERS: 'settings.tabs.members',
+  PERMISSIONS: 'settings.tabs.permission',
 };
 
 const tabItems = [{
   iconSrc: SettingsIC,
   text: tabText.GENERAL,
+  translate: true,
   disabled: false,
 }, {
   iconSrc: UserIC,
   text: tabText.MEMBERS,
+  translate: true,
   disabled: false,
 }, {
   iconSrc: ShieldUserIC,
   text: tabText.PERMISSIONS,
   disabled: false,
+  translate: true
 }];
 
 function GeneralSettings({ roomId }) {