added settings tab, add language chooser

src/components/RightSidebar/RightSidebar.js

@@ -8,22 +8,25 @@ import ColorsTab from './tabs/Colors';
 import FontsTab from './tabs/Fonts';
 import ActionsTab from './tabs/Actions';
 import AboutTab from './tabs/About';
+import SettingsTab from './tabs/Settings';
 
 const RightSidebar = () => {
   const { t } = useTranslation('rightSidebar');
 
   const context = useContext(AppContext);
   const { state, dispatch } = context;
-  const { data, theme } = state;
+  const { data, theme, settings } = state;
 
   const tabs = [
     t('templates.title'),
     t('colors.title'),
     t('fonts.title'),
     t('actions.title'),
+    t('settings.title'),
     t('about.title'),
   ];
-  const [currentTab, setCurrentTab] = useState(t('about.title'));
+  const [currentTab, setCurrentTab] = useState(t('settings.title'));
+
   const onChange = (key, value) => {
     dispatch({
       type: 'on_input',
@@ -46,6 +49,8 @@ const RightSidebar = () => {
         return <FontsTab theme={theme} onChange={onChange} />;
       case t('actions.title'):
         return <ActionsTab data={data} theme={theme} dispatch={dispatch} />;
+      case t('settings.title'):
+        return <SettingsTab settings={settings} onChange={onChange} />;
       case t('about.title'):
         return <AboutTab />;
       default:

src/components/RightSidebar/tabs/Settings.js

@@ -0,0 +1,47 @@
+import React from 'react';
+import { useTranslation, Trans } from 'react-i18next';
+
+import { languages } from '../../../i18n';
+import Dropdown from '../../../shared/Dropdown';
+
+const SettingsTab = ({ settings, onChange }) => {
+  const { t, i18n } = useTranslation('rightSidebar');
+
+  const onChangeLanguage = code => {
+    i18n.changeLanguage(code);
+    onChange('settings.language', code);
+  };
+
+  return (
+    <div>
+      <Dropdown
+        label={t('settings.language.label')}
+        value={settings.language}
+        onChange={onChangeLanguage}
+        options={languages}
+        optionItem={x => (
+          <option key={x.code} value={x.code}>
+            {x.name}
+          </option>
+        )}
+      />
+
+      <p className="text-gray-800 text-xs">
+        <Trans t={t} i18nKey="settings.language.helpText">
+          If you would like to help translate the app into your own language, please refer the
+          <a
+            className="text-blue-600 hover:underline"
+            target="_blank"
+            rel="noopener noreferrer"
+            href="https://docs.rxresu.me/translation/"
+          >
+            Translation Documentation
+          </a>
+          .
+        </Trans>
+      </p>
+    </div>
+  );
+};
+
+export default SettingsTab;