extracted strings from fonts tab

src/components/RightSidebar/RightSidebar.js

@@ -16,8 +16,8 @@ const RightSidebar = () => {
   const { state, dispatch } = context;
   const { data, theme } = state;
 
-  const tabs = [t('templates.title'), t('colors.title'), 'Fonts', 'Actions', 'About'];
-  const [currentTab, setCurrentTab] = useState(t('colors.title'));
+  const tabs = [t('templates.title'), t('colors.title'), t('fonts.title'), 'Actions', 'About'];
+  const [currentTab, setCurrentTab] = useState(t('fonts.title'));
   const onChange = (key, value) => {
     dispatch({
       type: 'on_input',
@@ -36,7 +36,7 @@ const RightSidebar = () => {
         return <TemplatesTab theme={theme} onChange={onChange} />;
       case t('colors.title'):
         return <ColorsTab theme={theme} onChange={onChange} />;
-      case 'Fonts':
+      case t('fonts.title'):
         return <FontsTab theme={theme} onChange={onChange} />;
       case 'Actions':
         return <ActionsTab data={data} theme={theme} dispatch={dispatch} />;

src/components/RightSidebar/tabs/Fonts.js

@@ -1,4 +1,6 @@
 import React from 'react';
+import { useTranslation } from 'react-i18next';
+
 import TextField from '../../../shared/TextField';
 
 const fontOptions = [
@@ -14,6 +16,8 @@ const fontOptions = [
 ];
 
 const FontsTab = ({ theme, onChange }) => {
+  const { t } = useTranslation('rightSidebar');
+
   return (
     <div className="grid grid-cols-1 gap-6">
       {fontOptions.map(x => (
@@ -29,16 +33,17 @@ const FontsTab = ({ theme, onChange }) => {
         </div>
       ))}
 
+      <div>
         <TextField
-        label="Font Family"
+          className="mb-3"
+          label={t('fonts.fontFamily.label')}
           placeholder="Avenir Next"
           value={theme.font.family}
           onChange={v => onChange('theme.font.family', v)}
         />
-      <p className="text-gray-600 text-sm">
-        You can use any font that is installed on your system as well. Just enter the name of the
-        font family here and the browser would load it up for you.
-      </p>
+
+        <p className="text-gray-800 text-xs">{t('fonts.fontFamily.helpText')}</p>
+      </div>
     </div>
   );
 };

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

@@ -0,0 +1,7 @@
+{
+  "title": "Fonts",
+  "fontFamily": {
+    "label": "Font Family",
+    "helpText": "You can use any font that is installed on your system as well. Just enter the name of the font family here and the browser would load it up for you."
+  }
+}

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

@@ -1,7 +1,9 @@
 import templates from './templates.json';
 import colors from './colors.json';
+import fonts from './fonts.json';
 
 export default {
   templates,
   colors,
+  fonts,
 };