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;

src/context/AppContext.js

@@ -80,6 +80,9 @@ const initialState = {
       accent: '#f44336',
     },
   },
+  settings: {
+    language: 'en',
+  },
 };
 
 const reducer = (state, { type, payload }) => {
@@ -120,8 +123,7 @@ const reducer = (state, { type, payload }) => {
 
       return {
         ...state,
-        data: payload.data,
-        theme: payload.theme,
+        ...payload,
       };
     case 'load_dummy_data':
       return {

src/i18n/index.js

@@ -3,6 +3,13 @@ import { initReactI18next } from 'react-i18next';
 
 import resources from './resources';
 
+const languages = [
+  {
+    code: 'en',
+    name: 'English',
+  },
+];
+
 i18n.use(initReactI18next).init({
   lng: 'en',
   fallbackLng: 'en',
@@ -12,4 +19,6 @@ i18n.use(initReactI18next).init({
   defaultNS: 'app',
 });
 
+export { languages };
+
 export default i18n;

src/i18n/resources/en/rightSidebar/index.js

@@ -2,6 +2,7 @@ import templates from './templates.json';
 import colors from './colors.json';
 import fonts from './fonts.json';
 import actions from './actions.json';
+import settings from './settings.json';
 import about from './about.json';
 
 export default {
@@ -9,5 +10,6 @@ export default {
   colors,
   fonts,
   actions,
+  settings,
   about,
 };

src/i18n/resources/en/rightSidebar/settings.json

@@ -0,0 +1,7 @@
+{
+  "title": "Settings",
+  "language": {
+    "label": "Language",
+    "helpText": "If you would like to help translate the app into your own language, please refer the <1>Translation Documentation</1>."
+  }
+}

src/i18n/resources/index.js

@@ -1,5 +1,7 @@
 import en from './en';
+import kn from './kn';
 
 export default {
   en,
+  kn,
 };

src/shared/Dropdown.js

@@ -0,0 +1,25 @@
+import React from 'react';
+
+const Dropdown = ({ label, value, onChange, options, optionItem }) => (
+  <div className="flex flex-col mb-2">
+    {label && (
+      <label className="uppercase tracking-wide text-gray-600 text-xs font-semibold mb-2">
+        {label}
+      </label>
+    )}
+    <div className="inline-flex relative w-full bg-gray-200 text-gray-800 rounded py-3 px-4 leading-tight focus:outline-none">
+      <select
+        className="block appearance-none w-full bg-gray-200 text-gray-800 focus:outline-none"
+        value={value}
+        onChange={e => onChange(e.target.value)}
+      >
+        {options.map(optionItem)}
+      </select>
+      <div className="pointer-events-none absolute inset-y-0 right-0 flex justify-center items-center px-2 bg-gray-200">
+        <i className="material-icons">expand_more</i>
+      </div>
+    </div>
+  </div>
+);
+
+export default Dropdown;